Својство border-color

Својство border-color поставља боју оквира за све стране истовремено или засебно за сваку страну. Вредност својства су било које јединице за боју. Подразумевана вредност: иста боја као и текста блока.

Својство је скраћеница за следећа својства: border-left-color, border-right-color, border-top-color, border-bottom-color.

Синтакса

селектор {
	border-color: боја;
}

Број вредности

Својство може примати 1, 2, 3 или 4 вредности, наведене раздвојене размаком:

Број	Опис
`1`	Тип за све стране истовремено.
`2`	Прва вредност за врх и дно, друга - за леву и десну ивицу.
`3`	Прва вредност за врх, друга - за леву и десну ивицу, трећа - за доњу.
`4`	Прва вредност за горњу ивицу, друга - за десну, трећа - за доњу, четврта - за леву ивицу.

Пример

Хајде да обојимо ивицу блока у црвену боју:

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

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

Пример

Поставимо црвену ивицу за горњу и доњу страну, а плаву за десну и леву страну:

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

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

Пример

Поставимо црвену ивицу за горњу страну, плаву за десну, зелену за доњу, црну за леву страну:

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

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

Пример

Поставимо истовремено различиту дебљину, тип и боју ивице:

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

Пример

Ако боја ивице није задата у border-color - узет ће се из својства color:

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

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

Види још

својство border-width,
које поставља дебљину ивице
својство border-style,
које поставља тип ивице
својство border,
које је скраћеница за ивицу