border-color

Übersicht

Die border-color Eigenschaft legt die Farbe des oberen, rechten, unteren und linken Rahmens fest.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
border-colorChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise Firefox also supports the following non-standard CSS properties to set the border sides to multiple colors: -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors, -moz-border-left-colors
IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 4Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Firefox also supports the following non-standard CSS properties to set the border sides to multiple colors: -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors, -moz-border-left-colors
Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch