The StyleWorksCSS { Referenz · Labor · Übungen }
  1. Startseite
  2. Referenz
  3. border-[top|right|bottom|left]-style

CSS 2.1 · Eigenschaft

CSS-Eigenschaft border-[top|right|bottom|left]-style

Vollreferenz zu border-[top|right|bottom|left]-style: erlaubte Werte, Ausgangswert, Vererbung, Beispiel – und ein Regler, der zeigt, was die Eigenschaft tut.

Erstveröffentlichung Lesezeit 4 min
stylesheet.css · border-[top|right|bottom|left]-style
.probe {
  border-top-style: dashed;
}
Dies ist der 1. Absatz. Er steht in einer Box, deren Stil die Regel links oben bestimmt.
berechneter Wertborder-top-style: dashed
Box-Breite–
Box-Höhe–

Erläuterungen

Diese Eigenschaft gibt die Möglichkeit, das Muster des Rahmens für nur einzelne Seiten des Elements festzulegen.

Da der Ausgangswert none ist, werden Rahmen nur dargestellt, wenn ein border-style definiert wurde.

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.

Da der definierte Hintergrund eines Elementes bis an die Außenkante des Rahmens reicht, bleibt dieser im Bereich des Rahmens teilweise sichtbar, wenn das Rahmenmuster Lücken enthält (dotted, dashed und double).

Die Werte groove, ridge, inset und outset haben auch Einfluß auf die Farbe des Rahmens (border-color), weil hier Licht- und Schattenseiten zur Erzeugung eines 3-d-Effekts berechnet werden.

Um als 'standardstreu' zu gelten, reicht es, wenn ein Browser die möglichen Werte als solid interpretiert.

Die hier beschriebenen Gestaltungsmöglichkeiten beziehen sich nur auf den Vordergrund des Rahmens. Die Hintergrundgestaltung der durch den Rahmen belegten Fläche ist von den verschiedenen background-Eigenschaften des Elements abhängig.

Erlaubte Werte

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

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
<border-style> | inherit

Der Werttyp <border-style> kann zehn verschiedene Schlüsselworte annehmen.

Werte 'none' und 'hidden'.
none/hidden

Wert 'dotted'.
dotted
Wert 'dashed'.
dashed
Wert 'solid'.
solid
Wert 'double'.
double
Wert 'groove'.
groove
Wert 'ridge'.
ridge
Wert 'inset'.
inset
Wert 'outset'.
outset
Schlüsselworte
CSS 2.1 erlaubt für diese Eigenschaft 10 Schlüsselworte:
  • none (Ausgangswert)
    Dieser Wert setzt die Rahmenbreite auf '0' zurück, d.h. es wird kein Rahmen dargestellt.
  • hidden
    Hat auf Elemente die gleiche Wirkung wie none, Ausnahme ist hier die Konfliktlösung im Rahmen des Collapsing Border Model innerhalb von Tabellen.
  • dotted
    Punktierte Linie. Der CSS2-Standard sagt nichts darüber aus, ob die Punkte rund, quadratisch oder elliptisch sein müssen/dürfen, über Abstände zwischen den Punkten oder die Ausrichtung innerhalb der Linie.
  • dashed
    Strichlierte Linie. Auch hier ist nichts vorbestimmt über die Länge der Striche/Abstände oder deren Ausrichtung.
  • solid
    Eine durchgehende Linie.
  • double
    Zwei durchgehende Linien nebeneinander. Die Breite der beiden Linien incl. des Zwischenraums soll der notierten Strichstärke entsprechen. Die Spezifikation lässt offen, wie breit die einzelnen Linien oder der Zwischenraum sein sollen oder wie die Doppellinie dargestellt wird, wenn die angegebene Rahmenbreite kleiner als '3px' ist.
  • groove
    3-d-Effekt, bei dem der Rahmen wie in die Bildebene eingekerbt wirkt.
  • ridge
    3-d-Effekt, bei dem der Rahmen wie aus der Bildebene 'hervorspringt'.
  • inset
    3-d-Effekt, bei dem das gesamte Element wie in die Bildebene eingetieft wirkt. Angebracht an Teilen von Tabellen, für die border-collapse: collapse deklariert ist, hat dieser Wert denselben Effekt wie groove.
  • outset
    3-d-Effekt, bei dem das gesamte Element wie aus der Bildebene 'hervorspringt'. Angebracht an Teilen von Tabellen, für die border-collapse: collapse deklariert ist, hat dieser Wert denselben Effekt wie ridge.
Für die vier 3-d-Werte bestimmt sich der Browser die Farben selbst, basierend auf der deklarierten Farbe für border-color oder border-[t|r|b|l]-color. Die Erfahrung zeigt, dass das Ergebnis in jedem Browser ein wenig anders aussieht. Verwendet man sehr helle bzw. sehr dunkle Farben, dann gleichen sich die Unterschiede zwischen den Browsern zwar wieder an, dafür kann es aber passieren, dass durch mangelnden Kontrast die 3-d-Wirkung nur noch gering ist.
inherit
Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

H3 { border-bottom-style:dotted; }

Browserunterstützung

Die Eigenschaften border-top-style, border-right-style, border-bottom-style und border-left-style werden von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 5.x, IE/Win 6
IE/Win erkennt den Wert inherit nicht,
an Tabellenelementen wird der Wert hidden ignoriert, und
der Wert dotted wird wie dashed dargestellt, wenn die Rahmenbreite nur 1 Pixel ist.
IE 7
Der Border-style-Bug ist korrigiert, die Defizite bezügl. der Werte hidden an Tabellenelementen und inherit bleiben.
Opera 8
Opera 8 erkennt den Wert inherit hier nur für die Kurzschrifteigenschaft, nicht für die Einzeleigenschaften.
Opera 9
In der Version 9 hat Opera das Problem gelöst, inherit wird jetzt an allen Einzeleigenschaften erkannt.
Konqueror 3.5
Konqueror macht im normalen Elementfluss einen nicht erlaubten Unterschied zwischen den Werten none und hidden, indem er hidden wie einen transparenten Rahmen darstellt.

Eric Meyer's CSS2 Test Suite: border-top-style, border-right-style, border-bottom-style, border-left-style.

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

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.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert
none
Berechneter Wert
Spezifizierter Wert
Vererbung
Nein
Anwendbarkeit
Auf alle Elemente
%-Bezugswert
Nicht zutreffend
Mediengruppe(n)
Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.