Свойство 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-style,
которое задает внешний вид границы
свойство border,
которое является свойством-сокращением для границы