Zum Textbeginn springen Zur Navigation springen

CSS 2.1 ::Referenz ::Eigenschaften

CSS 2.1: `border-width`

Erläuterungen

Die Eigenschaft border-width ist eine Kurzschrift- Eigenschaft, mit der die Strichbreite des Rahmens auf allen 4 Seiten eines Elements gleichzeitig notiert wird. Es ist möglich, einen, zwei, drei oder vier Werte anzugeben, die durch Leerzeichen voneinander getrennt werden:

Ein Wert:
Gilt für die Rahmen auf allen vier Seiten.

Zwei Werte:
Der erste Wert gilt für die Rahmen oben und unten, der zweite Wert für die Rahmen rechts und links.

Drei Werte:
Der erste Wert gilt für den Rahmen oben, der zweite Wert für die Rahmen rechts und links, der dritte Wert für den Rahmen unten.

Vier Werte:
Die Werte stehen in der Reihenfolge oben - rechts - unten - links.

Die Eigenschaft faßt die Eigenschaften border-top-width, border-right-width, border-bottom-width und border-left-width zusammen. border-width ist Teil der Kurzschrift- Eigenschaft border.

Wird die Darstellung eines Rahmens durch Angabe von border-style:none unterdrückt, dann wird die Strichstärke des Rahmens auf '0' zurückgesetzt.

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.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'border-width' <border-width>{1,4} | inherit

Der Werttyp <border-width> kann die Schlüsselworte thin, medium, thick oder den Wert <length> annehmen.

<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 wie medium dargestellt wird.
medium
Die CSS2-Spezifikation bestimmt nur, dass diese Strichbreite breiter oder gleich wie thin und schmaler oder gleich wie thick dargestellt wird.
thick
Die CSS2-Spezifikation bestimmt nur, dass diese Strichbreite breiter oder gleich wie medium dargestellt wird.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

H1.special { border-width: 5px; /* alle 4 Seiten */ } H1.special { border-width: 1px 0; /* oben-unten, rechts-links */ } H1.special { border-width: 0.5em 0 0.7em; /* oben, rechts-links, unten */ } H1.special { border-width: 2px 5px 5px 2px; /* 4 Seiten einzeln */ }

Browserunterstützung

: Die Eigenschaft border-width wird 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.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

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-[top|right|bottom|left]-width,
border-color, border-style,
background

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):
Siehe bei den individuellen Eigenschaften	Siehe bei den individuellen Eigenschaften	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.

TOP

Notizen: