CSS 2.1 ::Referenz ::Eigenschaften
CSS 2.1: border-color
Erläuterungen
border-color ist eine von zehn verschiedenen Eigenschaften zur Deklaration der Rahmenfarbe eines Elements. Es ist eine Kurzschrift- Eigenschaft, mit der die Farbe 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-color, border-right-color, border-bottom-color und border-left-color zusammen. border-color ist Teil der Kurzschrift- Eigenschaft border.
Wenn zusammen mit den übrigen Rahmeneigenschaften keine Farbe für den Rahmen gegeben ist, wird der Rahmen in der Farbe des Textes dargestellt.
Es reicht nicht aus, nur die Farbe und/oder Stärke des Rahmens anzugeben, denn wird kein border-style notiert, dann wird der Rahmen nicht dargestellt.
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.
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-color' <border-color>{1,4} | inherit
Der Werttyp <border-color> kann das Schlüsselwort transparent oder den Wert <color> annehmen.
<color>-
- Farbwert als Hexadezimalangabe (
#rrggbb) - Farbwert als Hexadezimalkurzangabe (
#rgb) - Prozentangaben (
rrr.r%,ggg.g%,bbb.b%) - direkte RGB-Werte (
rrr,ggg,bbb) - Farbnamen (Hier sind nur die 17 Farben
maroon,red,orange,yellow,olive,purple,fuchsia,white,lime,green,navy,blue,aqua,teal,black,silver,gray
sowie die Systemfarben im Standard definiert. Fast alle dieser Farben werden von den heute gängigen Browsern mit den korrekten RGB-Werten dargestellt. Dasselbe gilt auch für die meisten der bereits 1996 eingeführten X11-Farbnamen — die jedoch nicht standard- konform sind. Deshalb ist es empfehlenswert, stets die RGB- oder Hexadezimalangaben zu verwenden, um eine konsistente Farbdarstellung zwischen den verschiedenen Browsern zu erreichen.
- Farbwert als Hexadezimalangabe (
- Mehr Informationen über Farben in CSS finden Sie im Grundlagenartikel Farbwerte.
<transparent>- Dieser Wert lässt den Hintergrund des Elternelementes durchscheinen. Innerhalb von Tabellen ergibt das denselben Effekt wie die Änderung des
border-styleinhidden, hat jedoch keine Auswirkung auf denborder-styleselbst. IE/Win erkennt den Werttransparentnicht und setzt dafür den Ausgangswert. inherit- Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.
Code-Beispiel:
P { border-color: blue; /* alle 4 Seiten */ } P.wichtig { border-color: blue navy; /* oben-unten, rechts-links */ } P.wichtig { border-color: blue teal navy; /* oben, rechts-links, unten */ } P.wichtig { border-color: navy blue teal green; /* 4 Seiten einzeln */ }
Browserunterstützung
Die Eigenschaft border-color wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:
- IE 7
- IE 7 ignoriert den Wert
inherit. Innerhalb der Farbbezeichnungen nach SVG-1.0 akzeptiert IE 7 Grautöne nur mit der Bezeichnung '...gray...', nicht in der Schreibweise '...grey...'. - IE/Win 5.x, IE/Win 6
- IE/Win zeigt die gleichen Probleme wie IE 7, aber ignoriert zusätzlich den Wert
transparent. - Konqueror 3.5
- Konqueror erkennt innerhalb der Farbbezeichnungen nach SVG-1.0 auch Grautöne in der Schreibweise '...
grey...'. Ausnahme: der Wertgreyselbst wird wiesilverinterpretiert.
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]-color,border-style, border-width,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.
Die Displays vieler Kleingeräte können Farben nur bis maximal 65K darstellen und sind kontrastärmer als PC-Bildschirme.
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 |
Ausblick:
Im geplanten CSS3-Modul 'Color' gibt es einige neue Ansätze, Farben für Websites zu definieren. Als erstes fällt auf, dass Farbwerte auch mit der zusätzlichen Angabe des Alpha-Kanals, d.h. der Opazität, definiert werden können (RGBa). Auch die Möglichkeit, HSL- und HSLa-Farbwerte zu notieren, ist neu.
Nicht neu, aber dann auch in den Standard aufgenommen, ist der Satz der X11-Farbnamen.
Zu den bereits bekannten aus dem System des Benutzers abgeleiteten Farben kommen zusätzliche Werte für Hyperlinks.
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.
