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