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

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

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

Данная спецификация не устанавливает точную толщину каждого ключевого слова. Но всегда действует следующая последовательность - thin ≤ medium ≤ thick.

Значение по умолчанию	medium
Применяется	Ко всем элементам, а также к ::first-letter.
Наследуется	Нет
Анимируемое	Да. Толщина может быть анимируема.
Версия	CSS1
DOM синтаксис	object.style.borderBottomWidth = "5px";

Синтаксис

border-bottom-width: medium | thin | thick | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      border-style: dotted;
      border-bottom-width: thick;
      }
    </style>
  </head>
  <body>
    <p>Здесь использовано свойство border-bottom-width для установления толщины нижней границы элемента.</p>
  </body>
</html>

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

Пример, где установлена толщина medium для нижней границы:

Пример

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

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

Пример, где можно увидеть разницу между нижними границами с 20px thin width и 20px thick width:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      padding: 5px;  
      border-bottom-style: ridge;
      border-bottom-width: 20px thin;
      }
      div {
      padding: 5px;  
      border-style: ridge;
      border-bottom-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Заголовок с нижней границей 20px thin</h2>
    <div>div элемент с нижней границей 20px thick.</div>
  </body>
</html>

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

Значения

Значение	Описание
medium	Устанавливает толщину medium для нижней границы. Значение по умолчанию.
thin	Устанавливает толщину thin для нижней границы.
thick	Устанавливает толщину thick для нижней границы.
length	Определяет толщину нижней границы в единицах измерения.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.


1.0+	1.0+	1.0+	3.5+

1.0+

3.5+

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

Синтаксис

Пример

Пример

Пример

Значения

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

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