Својство border-style

Својство border-style поставља стил ивице за све стране истовремено или одвојено за сваку страну. Је својство-скраћеница за следећа својства: border-left-style, border-right-style, border-top-style, border-bottom-style.

Синтакса

cssселектор {
  border-style: вредност;
}

Вредности

Вредност	Опис
`solid`	Пуна линија.
`dotted`	Ивица у облику тачака.
`dashed`	Ивица у облику цртица.
`ridge`	Ивица у облику конвексне линије.
`double`	Ивица у облику двоструке линије. Да би се видео ефекат, дебљина ивице мора бити најмање `3px`.
`groove`	Конкавна ивица.
`inset`	Увучена ивица.
`outset`	Избочена ивица.
`none`	Одсуство ивице.

Подразумевана вредност: none.

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

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

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

Пример . Вредност solid

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

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

Результат:

Пример . Вредност dotted

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

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

Результат:

Пример . Вредност dashed

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

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

Результат:

Пример . Вредност ridge

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

css#elem {
  border-width: 3px;
  border-style: ridge;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Пример . Вредност double

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

css#elem {
  border-width: 3px;
  border-style: double;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Пример . Вредност groove

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

css#elem {
  border-width: 3px;
  border-style: groove;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Пример . Вредност inset

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

css#elem {
  border-width: 3px;
  border-style: inset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Пример . Вредност outset

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

css#elem {
  border-width: 3px;
  border-style: outset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Пример

У овом примеру постављени су различити типови ивице за различите стране елемента:

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

css#elem {
  border-width: 1px;
  border-style: solid dotted dashed dotted;
  border-color: 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;
}

Результат:

Пример

Сада за горњу и доњу ивицу је постављен тип solid, а за десну и леву - dotted:

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

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

Результат:

Види још

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