Ü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
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome 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 ? Edge Mobile Vollständige Unterstützung JaFirefox 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 11Safari iOS Vollständige Unterstützung 1Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: SJW, Sebastianz, fscholz, Yuichiro, Michael2402
Zuletzt aktualisiert von: SJW,