Übersicht
Die border-color
Eigenschaft legt die Farbe des oberen, rechten, unteren und linken Rahmens fest.
Initialwert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter . |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Syntax
border-color: <color>{1,4}wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Werte
- <Farbe>
- Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
- transparent
- Der Rahmen hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.
- inherit
- Der Wert des Elternelements wird geerbt.
- Ein Wert
- Gilt für alle vier Seiten: border-top-color, border-right-color, border-bottom-color und border-left-color.
- Zwei Werte
- Der erste Wert gilt für border-top-color und border-bottom-color, der zweite Wert für border-right-color und border-left-color.
- Drei Werte
- Der erste Wert gilt für border-top-color, der zweite Wert für border-right-color und border-left-color und der dritte Wert für border-bottom-color.
- Vier Werte
- Der erste Wert gilt für border-top-color, der zweite Wert für border-right-color, der dritte Wert für border-bottom-color und der vierte Wert für border-left-color.
Beispiele
.beispielEins { border: solid; border-color: blue; }
.beispielZwei { border: solid; border-color: blue #f00; }
.beispielDrei { border: solid; border-color: blue #f00 rgb(0,150,0); }
.beispielVier { border: solid; border-color: blue #f00 rgb(0,150,0) transparent; }
Spezifikation
Spezifikation | Status | Anmerkung |
---|---|---|
CSS Backgrounds and Borders Module Level 3 Die Definition von 'border-color' in dieser Spezifikation. |
Anwärter Empfehlung | The transparent keyword has been removed as it is now a part of the <color> data type. |
CSS Level 2 (Revision 1) Die Definition von 'border-color' in dieser Spezifikation. |
Empfehlung | The property is now a shorthand property |
CSS Level 1 Die Definition von 'border-color' in dieser Spezifikation. |
Empfehlung |
Browser Kompatibilität
BCD tables only load in the browser