Eigenschaft border-color

Die Eigenschaft border-color legt die Farbe des Rahmens für alle Seiten gleichzeitig oder getrennt für jede Seite fest. Als Wert der Eigenschaft dienen beliebige Farbangaben. Standardwert: die gleiche Farbe wie der Text des Blocks.

Die Eigenschaft ist eine Kurzschreibweise für die folgenden Eigenschaften: border-left-color, border-right-color, border-top-color, border-bottom-color.

Syntax

Selektor {
	border-color: Farbe;
}

Anzahl der Werte

Die Eigenschaft kann 1, 2, 3 oder 4 Werte annehmen, die durch Leerzeichen getrennt angegeben werden:

Anzahl	Beschreibung
`1`	Typ für alle Seiten gleichzeitig.
`2`	Erster Wert für oben und unten, zweiter - für linke und rechte Rahmen.
`3`	Erster Wert für oben, zweiter - für linke und rechte Rahmen, dritter - für unten.
`4`	Erster Wert für den oberen Rahmen, zweiter - für den rechten, dritter - für den unteren, vierter - für den linken Rahmen.

Beispiel

Lassen Sie uns den Rahmen des Blocks rot einfärben:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red;
	width: 300px;
	height: 100px;
}

Beispiel

Legen wir einen roten Rahmen für die obere und untere Seite fest und einen blauen für die rechte und linke Seite:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue;
	width: 300px;
	height: 100px;
}

Beispiel

Legen wir einen roten Rahmen für die obere Seite fest, einen blauen für die rechte, einen grünen für die untere, einen schwarzen für die linke Seite:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Beispiel

Legen wir gleichzeitig unterschiedliche Dicke, Typ und Farbe des Rahmens fest:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Beispiel

Wenn die Rahmenfarbe nicht in border-color angegeben ist - wird sie aus der Eigenschaft color übernommen:

<div id="elem"></div>

#elem {
	color: red;
	border-style: solid;
	border-width: 2px;
	width: 300px;
	height: 100px;
}

Siehe auch

Eigenschaft border-width,
die die Rahmendicke festlegt
Eigenschaft border-style,
die den Rahmenstil festlegt
Eigenschaft border,
die die Kurzschreibweise für den Rahmen ist