Zum Textbeginn springen Zur Navigation springen

CSS 2.1 ::Referenz ::Eigenschaften

CSS 2.1: `border-[top|right|bottom|left]-style`

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.

none/hidden

dotted

dashed

solid

double

groove

ridge

inset

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:

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.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
`none`	Spezifizierter Wert	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: