w3docs logo

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

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

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

Цвет нижней границы может быть установлен сокращенным свойством border-color.

Значение по умолчанию currentColor
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да. Цвет border-bottom анимируем.
Версия CSS1
DOM синтаксис object.style.borderBottomColor = "blue";

Синтаксис

border-bottom-color: color | transparent | initial | inherit;

Пример

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

Рассмотрим пример, где добавлены цвета к элементам <h2>, <p> и <div>, чтобы показать цветовой эффект.

Пример

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

В следующем примере можно применить значение transparent:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border: #666 dashed;
      border-bottom-color: transparent;
      padding: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Пример transparent border-bottom-color</h2>
    <div>Пример div элемента с transparent border-bottom-color.</div>
  </body>
</html>

Можно применить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства border-right-color.

Узнать больше о HTML Colors.

Рассмотрим пример со значениями hexadecimal, RGB, HSL и названием цвета, установленные для border-bottom-color:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      p {
      border: 5px solid #666;
      width: 60%;
      padding: 5px;
      }
      .name {  
      border-bottom-color: lightblue;
      }
      .hex {
      border-bottom-color: #1c87c9;
      }
      .rgb { 
      border-bottom-color: rgba(0,0,0,0.15);
      }
      .hsl { 
      border-bottom-color:  hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <p class="name">Нижняя граница с названием цвета.</p>
    <p class="hex">Нижняя граница со значением hexadecimal.</p>
    <p class="rgb">Нижняя граница со значением RGB color.</p>
    <p class="hsl">Нижняя граница со значением HSL color.</p>
  </body>
</html>

Значения

Значение Описание
color Указывает на цвет нижней границы. Цвет по умолчанию - цвет элемента. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). Необходимое значение.
transparent Указывает, что цвет границы должен быть transparent. Нижняя граница может занять место, установленное значением border-width.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

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

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

Choose the correct statements about the CSS property 'border-bottom-color' from the following
Считаете ли это полезным?