Својство border-color

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

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

Синтакса

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

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

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

Пример

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

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

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

Результат:

Пример

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

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

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

Результат:

Пример

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

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

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

Результат:

Пример

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

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

css#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:

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

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

Результат:

Види још