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

Свойство border-bottom является сокращенным свойством, с помощью которого можно установить толщину, стиль и цвет нижней границы. Можно изменить последовательность значений. Но правильным считается следующая последовательность: толщина, стиль, цвет. Если не установить стиль границы, цвет не будет работать, так как элемент должен иметь границы, чтобы суметь изменить их цвет.

Если не указать толщину, автоматически будет выбрана средняя толщина. Если цвет не указан, будет выбран родительский цвет, а если не указан стиль, то он не будет работать.

Значение по умолчанию medium none currentColor
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да. Цвет и толщина нижней границы анимируемы.
Версия CSS1
DOM синтаксис object.style.borderBottom = "15px dotted blue";

Синтаксис

border-bottom: border-width | border-style | border-color | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-bottom: 8px groove #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Заголовок с нижней границей groove blue.</h2>
  </body>
</html>

Рассмотрим пример, где добавлена нижняя граница к элементам <h2>, <p> и <div>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-bottom: 5px dashed #1c87c9;
      }
      p {
      border-bottom: 8px double #8ebf42;
      }
      div {
      border-bottom: 10px ridge #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Заголовок с нижней границей dashed blue.</h2>
    <p>Параграф с нижней границей double green.</p>
    <div>div элемент с нижней границей ridge gray.</div>
  </body>
</html>

Значения

Значение Описание
border-bottom-style Устанавливает стиль нижней границы. Значение по умолчанию - "none".
border-bottom-width Устанавливает толщину нижней границы. Значение по умолчанию - "medium".
border-bottom-color Устанавливает цвет нижней границы. Значение по умолчанию - цвет текста.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

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

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

Что представляет собой свойство CSS 'border-bottom'?
Считаете ли это полезным?