Свойство border-style задает тип границы для всех сторон одновременно или отдельно для каждой стороны.

Существуют также свойства border-top-style, border-bottom-style, border-left-style, border-right-style, которые задают тип границы для каждой ее стороны.

См. также свойства border-color и border-style, а также свойство-сокращение для границы border.

Синтаксис

селектор {
	border-style: solid | dotted | dashed | ridge | double | groove | inset | outset | none;
}
селектор {
	border-style: solid dotted;
}
селектор {
	border-style: solid dotted solid;
}
селектор {
	border-style: solid dotted solid dotted;
}

Может принимать 1, 2, 3 или 4 параметра.

Число параметров Описание
1 Тип для всех сторон одновременно.
2 Первый параметр для верха и низа, второй - для левой и правой границ.
3 Первый параметр для верха, второй - для левой и правой границ, третий - для нижней.
4 Первый параметр для верхней границы, второй - для правой, третий - для нижней, четвертый - для левой границы.

Значения

Значение Описание
solid Сплошная линия.
dotted Граница в виде точек.
dashed Граница в виде тире.
ridge Граница в виде выпуклой линии.
double Граница в виде двойной линии. Чтобы увидеть эффект толщина границы должна быть минимум 3px!
groove Вогнутая граница.
inset Рамка.
outset Рамка.
none Отсутствие границы.

Значение по умолчанию: none.

Примеры

Пример . Значение solid

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

Результат выполнения кода:

Пример . Значение dotted

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

Результат выполнения кода:

Пример . Значение dashed

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

Результат выполнения кода:

Пример . Значение ridge

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

Результат выполнения кода:

Пример . Значение double

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

Результат выполнения кода:

Пример . Значение groove

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

Результат выполнения кода:

Пример . Значение inset

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

Результат выполнения кода:

Пример . Значение outset

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

Результат выполнения кода:

Пример

В данном примере заданы различные типы границы для разных сторон элементов:

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

Результат выполнения кода:

Пример

А сейчас для разных сторон элемента также задана различная толщина границы:

#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:

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

Результат выполнения кода: