CSS 2.1 ::Referenz ::Eigenschaften

CSS 2.1: border-style

Erläuterungen

Border-style ist eine Kurzschrift- Eigenschaft, mit der das Muster 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-style, border-right-style, border-bottom-style und border-left-style zusammen. border-style ist Teil der Kurzschrift- Eigenschaft border.

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

Browserunterstützung

Die Eigenschaft border-style wird 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.
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 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]-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.

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


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

Die URL dieser Seite ist: thestyleworks.de/ref/border-style.shtml
Gedruckt am Mittwoch, dem 17. September, 2014.
© Copyright All Contents 2002- 2014 K. Langenberg.
Commercial Use prohibited.


Notizen: