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.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Rahmenstärke |
| medium |
|
Verwandte Eigenschaften aus der Kategorie: Rahmen (allgemein), Box model (CSS 2.1), Backgrounds and Borders (CSS 3):
- background
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- Aktuelle Seite: border-width
- box-shadow
- box-sizing
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
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.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu border-width:
- W3C Spezifikation:
http://www.w3.org/TR/css3-background/#border-width
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
border-top-width - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
bottom
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!