CSS 2.1: border-style

Erlaubte Werte

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

'border-style' <border-style>{1,4} | 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
  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:

P.wichtig { border-style: double; /* alle 4 Seiten */ } P.wichtig { border-style: double single; /* oben-unten, rechts-links */ } P.wichtig { border-style: double single none; /* oben, re-li., unten */ } P.wichtig { border-style: double none dotted single; /* Seiten einzeln */ }

Wechselwirkungen:

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

Weitere Charakteristika:

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