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

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

Если не указать стиль свойства border-bottom или свойства границ, border-bottom-style не появится.

Важно знать, что данная спецификация не устанавливает, как соединяются границы разных стилей в углах.

Значение по умолчанию	none
Применяется	Ко всем элементам.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS1
DOM Syntax	object.style.borderBottomStyle = "dotted";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <title>Заголовок документа</title>
  <head>
    <style>
      h2 {
      border-bottom-style: solid;
      }
      div {
      border-bottom-style: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Заголовок с нижней границей solid.</h2>
    <div>div элемент с нижней границей dashed.</div>
  </body>
</html>

Попробуйте сами!

Пример с разными стилями нижней границы:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      h2 {
      border-bottom-style: double;
      }
      p {
      border-style: solid;
      border-bottom-style: dashed;
      }
      div {
      border-bottom-style: groove;
      border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Заголовок с нижней границей double.</h2>
    <p> Параграф с нижней границей dashed. </p>
    <div>div элемент с нижней границей groove.</div>
  </body>
</html>

Попробуйте сами!

Values

Значение	Описание
none	Указывает на отсутствие границы. Значение по умолчанию.
hidden	Имеет тот же эффект, что и none, за исключением применения border-bottom-style к ячейкам таблицы.
dotted	Точечная граница.
dashed	Пунктирная граница.
solid	Сплошная граница.
double	Двойная сплошная граница.
groove	Отображает границы с 3D groove эффектом и создает впечатление, что граница вырезана. Противоположный эффекту ridge.
ridge	Отображает границы с 3D ridge эффектом и создает впечатление, что граница выдвинута. Противоположный эффекту groove.
inset	3D эффект, создающий впечатление вложенного элемента. Противоположный эффекту outset.
outset	3D эффект, создающий впечатление выпуклого элемента. Противоположный эффекту inset.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.


1.0+	1.0+	1.0+	9.2+

1.0+

9.2+

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

Синтаксис

Пример

Пример

Values

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

Практикуйте свои знания