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

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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

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

What are the possible values for the 'border-bottom-width' property in CSS?
Считаете ли это полезным?