Ihre Suchergebnisse

border-color

In diesem Artikel

Übersicht
Syntax
1. Werte
Beispiele
Spezifikation
Browser Kompatibilität
Siehe auch

Übersicht

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

Initialwert	wie die jeweiligen Kurzschreibweisen: `border-top-color`: `currentColor` `border-right-color`: `currentColor` `border-bottom-color`: `currentColor` `border-left-color`: `currentColor`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter`.
Vererbt	Nein
Medien	visuell
Berechneter Wert	wie 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)`.
Animierbar	wie die jeweiligen Kurzschreibweisen: `border-bottom-color`: ja, als Farbe `border-left-color`: ja, als Farbe `border-right-color`: ja, als Farbe `border-top-color`: ja, als Farbe
Kanonische Reihenfolge	die 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

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, 28.06.2016, 07:10:28

Siehe auch