CSS 2.1 ::Referenz ::Eigenschaften
CSS 2.1: border-[top|right|bottom|left]-width
Erläuterungen
Diese Eigenschaft gibt die Möglichkeit, die Strichbreite des Rahmens für nur einzelne Seiten des Elements festzulegen. Wird die Darstellung eines Rahmens durch Angabe von border-style:none
unterdrückt, dann wird die Strichstärke des Rahmens auf '0' zurückgesetzt.
Erlaubte Werte
Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' <border-width> | inherit
Der Werttyp <border-width>
kann die Schlüsselworte thin
, medium
, thick
oder den Wert <length>
annehmen.
Tipp:
Es ist vorteilhaft, anstelle der einzelnen Eigenschaften wann immer möglich die entsprechenden Kurzschrift- Eigenschaften zu verwenden. Dadurch werden die notierten Regeln übersichtlicher und kompakter. Man sollte dabei aber im Hinterkopf behalten, dass alle nicht deklarierten einzelnen Eigenschaften auf ihre Ausgangswerte zurückgesetzt werden.
<length>
- Eine absolute oder relative Längenangabe. Negative oder Prozentwerte sind nicht möglich. Längenangaben und Schlüsselworte können auch gemischt werden.
- Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.
- Schlüsselworte
thin
Die CSS2-Spezifikation bestimmt nur, dass diese Strichbreite schmaler oder gleich wiemedium
dargestellt wird.medium
(Ausgangswert)
Die CSS2-Spezifikation bestimmt nur, dass diese Strichbreite breiter oder gleich wiethin
und schmaler oder gleich wiethick
dargestellt wird.thick
Die CSS2-Spezifikation bestimmt nur, dass diese Strichbreite breiter oder gleich wiemedium
dargestellt wird.
inherit
- Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.
Code-Beispiel:
TABLE { border-top-width:thin; }
Browserunterstützung
- Die Eigenschaften
border-top-width
,border-right-width
,border-left-width
undborder-bottom-width
werden von allen modernen Browsern unterstützt, mit diesen Ausnahmen: - IE 7
- Der Wert
inherit
wird auch in der neuesten Version vom Microsoft-Browser noch nicht erkannt. - Opera 8.5
- Der norwegische Browser erkennt den Wert
inherit
nur an der Kurzschrift- Eigenschaft, nicht an den Einzeleigenschaften. - Opera 9
- Auch hier hat Opera das Problem in der Version 9 gelöst,
inherit
wird jetzt an allen Einzeleigenschaften erkannt.
Eric Meyer's CSS2 Test Suite: border-top-width
, border-right-width
, border-bottom-width
, border-left-width
.
Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.
Wechselwirkungen:
border
,
border-width
,
border-[top|right|bottom|left]
,
border-[top|right|bottom|left]-color
,
border-[top|right|bottom|left]-style
Besonderheiten im Medientyp handheld
:
Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.
Einige Mobilgeräte verringern Rahmenstärken im Stylesheet, um die Darstellung an Kleindisplays zu 'optimieren'. Innerhalb von Text werden Rahmen oft ganz unterdrückt. Größere Abstände an Block- Level- Elementen sind in der Darstellung vielfach bis auf wenige Pixel verringert. Deshalb sollte man für border-width
keine absoluten Werte, sondern relative Größen angeben. Dadurch sind sie automatisch an die unterschiedlichen Ausmaße der Displays angepasst.
Weitere Charakteristika:
Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.
Ausgangs- wert: |
Berechneter Wert: |
Vererbung: | Anwendbar- keit: |
%-Bezugs- wert: |
Medien- gruppe(n): |
---|---|---|---|---|---|
medium |
Absolute Länge, 0 für none und hidden |
Nein | Auf alle Elemente | Nicht zutreffend | Visual |
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.