Својство border-style

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

Синтакса

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

Вредности

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример

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

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

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

Пример

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

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

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

Види још

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