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