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 Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 9.2+

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

Which of the following values the 'border-bottom-style' property in CSS can have?
Считаете ли это полезным?