Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: border-width, Kategorien: Rahmen (allgemein), Box model (CSS 2.1), Backgrounds and Borders (CSS 3)

Rahmenstärke

Bestimmt die Rahmenstärke der unterschiedlichen HTML-Elemente.

CSS-Eigenschaft: border-width
KurzbeschreibungWerteStandardwertKategorieHinweis
Rahmenstärke
  • <length>
  • thin
  • medium
  • thick
  • inherit
medium
Allgemein:
Rahmen
CSS 2.1:
Box model
CSS 3:
Backgrounds and Borders
 

Folgendes ist beim Einsatz von border-width zu beachten:

  • Benötigt immer eine Angabe des border-style, damit der Rahmen dargestellt werden kann, eine Stärkeangabe des Rahmen alleine ist nicht ausreichend und ohne Effekt.
  • Ist die Kurzschreibweise für border-top-width, border-right-width, border-bottom-width und border-left-width.
  • In dieser Kurzschreibweise können 1 - 4 Werte angegeben werden. Die Parameter wirken in der Reichenfolge [oben][rechts][unten][links]. Oder einfacher zu merken, ab 12:00 Uhr im Uhrzeigersinn, also [12:00][3:00][6:00][9:00].
  • Werden keine 4 Parameter übergeben, wird die fehlende Stärke von der gegenüberliegenden Seite übernommen. Das heißt, fehlt die 4. Angabe für den linken Rahmen, wird die Stärke von rechts (2. Parameter) übernommen, fehlt auch der 3. Parameter für unten, wird die Stärke von oben (1. Parameter) übernommen. Die Angabe von nur einem Parameter bestimmt die Stärke von allen Seiten.
  • Ist keine Farbangabe gesetzt, wird die Farbe des Textes des body bzw. des relevanten Elements als Rahmenfarbe verwendet.
  • Stärkenangaben werden in absoluten Werten angegeben, beispielsweise PX, PT, EM, etc. oder über die Schlüsselworte thin, medium oder thick. medium ist dabei der Standardwert, der auch verwendet wird, wenn nur ein border-style, aber keine border-width vergeben wurde. Angaben in % sind nicht erlaubt und werden ignoriert.
  • Schlüsselworte und Werte können beliebig kombiniert werden. Eine Angabe von border-width: medium 10px ist also erlaubt.
Browserunterstützung von border-width
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu border-width:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    border-top-width


Beispiele

HTML:

<div></div>

CSS:

div {
   height: 150px;
   border: solid #C00000;
}
/*  Generelle Einstellung für alle Beispiele.
Wird keine border-width vergeben, wird der Standardwert medium verwendet */

Beispiel Nr. 1 So sieht's aus:

 

HTML:

<div class="demoEins"></div>

CSS:

div.demoEins {
   border-width: thin;
}

Beispiel Nr. 2 So sieht's aus:

 

HTML:

<div class="demoZwei"></div>

CSS:

div.demoZwei {
   border-width: thick;
}

Beispiel Nr. 3 So sieht's aus:

 

HTML:

<div class="demoDrei"></div>

CSS:

div.demoDrei {
   border-width: 30px;
}

Beispiel Nr. 4 So sieht's aus:

 

HTML:

<div class="demoVier"></div>

CSS:

div.demoVier {
   border-width: 30pt;
}

Beispiel Nr. 5 So sieht's aus:

 

HTML:

<div class="demoFuenf"></div>

CSS:

div.demoFuenf {
   border-width: 0.8em;
}

Beispiel Nr. 6 So sieht's aus:

 

HTML:

<div class="demoNurZwei"></div>

CSS:

div.demoNurZwei {
   border-width: medium 2em;
}
/* Bei zwei Parametern wirkt der erste gleichzeitig auf oben und unten, der zweite auf links und rechts. */

Beispiel Nr. 7 So sieht's aus:

 

HTML:

<div class="demoNurDrei"></div>

CSS:

div.demoNurDrei {
   border-width: 10px 5px 20px;
}
/* Drei Parameter, die 5px wirken links und rechts. */

Beispiel Nr. 8 So sieht's aus:

 

HTML:

<div class="demoAlleVier"></div>

CSS:

div.demoAlleVier {
   border-width: 0.8em thin 20px thick;
}
/* Pro Seite eine eigene Breitenangabe. */

Beispiel Nr. 9 So sieht's aus:

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.115 sec.

Browser-Marktanteile