Свойство 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,
което е свойство-съкращение за границата