Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

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
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • border-bottom-color: Falls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das transparent Schlüsselwort wird zu rgb(0,0,0).
  • border-left-color: Falls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das transparent Schlüsselwort wird zu rgb(0,0,0).
  • border-right-color: Falls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das transparent Schlüsselwort wird zu rgb(0,0,0).
  • border-top-color: Falls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das transparent Schlüsselwort wird zu rgb(0,0,0).
Animierbarwie 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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

wobei
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 oder früher) [1] 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1.9.2) [1] ? ? ?

[1] The following Mozilla extensions set the border sides to multiple colors for Gecko based browsers like Firefox. -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors, -moz-border-left-colors

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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