CSS-свойство border-bottom-style

CSS-свойство border-bottom-style индивидуально устанавливает стиль нижней границы элемента. Однако во многих случаях более короткие CSS-свойства, такие как border-style или border-bottom, более удобны и предпочтительны в использовании.

Значение по умолчанию:	`none`
Применяется к:	Все элементы
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	CSS 1, 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit

Примеры написания кода свойства border-bottom-style:

p {
    border-bottom-style: dashed;
    border-bottom-width: 3px;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`none`	Граница не будет отображается.
`hidden`	То же, что `none`, за исключением случая, когда ячейки таблицы имеют border-collapse и две ячейки имеют общую границу. Значение `hidden` гарантирует, что граница не отображается, поскольку `hidden` имеет приоритет над всеми другими стилями границ.
`dotted`	Отображает границу в виде серии точек.
`dashed`	Отображает границу в виде серии коротких отрезков, то есть штрихов.
`solid`	Отображает границу одной сплошной линией.
`double`	Отображает границу в виде двух параллельных сплошных линий с некоторым промежутком между ними. Сумма двух строк и пробел между ними равны значению `border-width`.
`groove`	Отображает границу, как будто она была вырезана на холсте. Это создает впечатление трехмерного изображения, которое обычно достигается созданием тени из двух цветов, которые немного светлее и темнее, чем `border-color`.
`ridge`	Отображает границу с эффектом, противоположным `groove`. Это также создает впечатление трехмерности, границы выглядят так, как будто они выходят из холста.
`inset`	Отображает границу, из-за которой элемент выглядит так, как будто он встроен в холст. Это создает впечатление трехмерного изображения, которое обычно достигается созданием тени из двух цветов, которые немного светлее и темнее, чем `border-color`.
`outset`	Отображает границу, которая имеет эффект, противоположный `inset`. Это также создает впечатление трехмерности, граница создает вид, как будто он «выходит» из холста.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение его свойства родительского элемента `border-bottom-style`.

Поддержка браузеров

Свойство border-bottom-style поддерживается во всех основных браузерах.

Internet Explorer 7 и более ранние версии не поддерживают значение hidden. IE8 поддерживает, но требует <!DOCTYPE>. IE9 и выше поддерживают значение hidden.