Својство 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;
}

Результат:

Погледнете исто така