Właściwość border-color

Właściwość border-color ustawia kolor obramowania dla wszystkich stron jednocześnie lub osobno dla każdej strony. Wartością właściwości są dowolne jednostki dla koloru. Wartość domyślna: taki sam kolor, jak tekstu bloku.

Właściwość jest właściwością-skrótem dla następujących właściwości: border-left-color, border-right-color, border-top-color, border-bottom-color.

Składnia

selektor {
	border-color: kolor;
}

Liczba wartości

Właściwość może przyjmować 1, 2, 3 lub 4 wartości, podawanych poprzez spację:

Liczba	Opis
`1`	Typ dla wszystkich stron jednocześnie.
`2`	Pierwsza wartość dla góry i dołu, druga - dla lewej i prawej granicy.
`3`	Pierwsza wartość dla góry, druga - dla lewej i prawej granicy, trzecia - dla dolnej.
`4`	Pierwsza wartość dla górnej granicy, druga - dla prawej, trzecia - dla dolnej, czwarta - dla lewej granicy.

Przykład

Pokolorujmy obramowanie bloku na czerwono:

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

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

Przykład

Ustawmy czerwoną granicę dla górnej i dolnej strony, a niebieską dla prawej i lewej strony:

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

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

Przykład

Ustawmy czerwoną granicę dla górnej strony, niebieską dla prawej, zieloną dla dolnej, czarną dla lewej strony:

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

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

Przykład

Ustawmy jednocześnie różną grubość, typ i kolor granicy:

<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;
}

Przykład

Jeśli kolor obramowania nie jest ustawiony w border-color - zostanie wzięty z właściwości color:

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

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

Zobacz też

właściwość border-width,
która ustawia grubość obramowania
właściwość border-style,
która ustawia typ obramowania
właściwość border,
która jest właściwością-skrótem dla obramowania