W3docs
ru
Войти

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

Свойство CSS border-bottom-color задаёт цвет нижней границы элемента. Примеры и интерактивные демонстрации.

Свойство CSS border-bottom-color задаёт цвет только нижней границы элемента. Это одно из четырёх свойств цвета отдельных сторон наряду с border-top-color, border-right-color и border-left-color.

Граница состоит из трёх составляющих: стиля, ширины и цвета. Граница невидима, пока ей не задан стиль, поэтому border-bottom-color само по себе ничего не даёт. До (или одновременно с ним) необходимо объявить стиль через border-style или border-bottom-style — иначе стиль по умолчанию будет none и граница не отрисуется, какой бы цвет вы ни задали.

Когда использовать

Используйте border-bottom-color, когда нужно изменить цвет только нижнего края, не затрагивая остальные три стороны. Типичные случаи:

  • Заголовки и ссылки в стиле подчёркивания — нижняя граница, которая меняет цвет по :hover или :focus, не сдвигая макет (в отличие от text-decoration).
  • Панели вкладок и активные состояния — цветная нижняя граница отмечает выбранную вкладку.
  • Перекраска одной стороны равномерной границы — задайте все четыре стороны через шорткат border-color, а затем переопределите нижнюю с помощью border-bottom-color.

Значение по умолчанию — currentColor, то есть если цвет не задан, граница принимает цвет текста элемента. Цвет нижней границы также можно задать через шорткат border-color (третье значение) или шорткат border-bottom.

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

Синтаксис

Синтаксис свойства CSS border-bottom-color

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

Пример свойства border-bottom-color:

Пример свойства CSS border-bottom-color со значением color

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-bottom-style: solid;
        border-bottom-color: #1c87c9;
        border-bottom-width: 5px;
      }
    </style>
  </head>
  <body>
    <h2> A heading with a solid blue bottom border</h2>
  </body>
</html>
Попробуйте сами »

Результат

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

Пример свойства border-bottom-color с добавлением цветов разным HTML-элементам для демонстрации эффекта:

Пример свойства CSS border-bottom-color со свойством border-style

<!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>A heading with a groove green bottom border.</h2>
    <div>A div element with an inset gray bottom border.</div>
    <p>A paragraph with a double blue border.</p>
  </body>
</html>
Попробуйте сами »

Пример свойства border-bottom-color со значением "transparent":

Пример свойства CSS border-bottom-color со значением transparent

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: #666 dashed;
        border-bottom-color: transparent;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Example of transparent border-bottom-color</h2>
    <div>This is an example of a div element which has a transparent border-bottom-color.</div>
  </body>
</html>
Попробуйте сами »

Обратите внимание: transparent — это не отсутствие границы: нижняя граница по-прежнему занимает пространство, заданное border-bottom-width, она просто невидима. Это удобно для резервирования места в макете, которое вы показываете при наведении или фокусе.

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

Совет

Узнайте больше о цветах HTML.

Пример свойства border-bottom-color со значением "color":

Пример свойства CSS border-bottom-color с шестнадцатеричными, RGB, HSL и именованными цветами

<!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">Bottom border with a named color.</p>
    <p class="hex">Bottom border with a hexadecimal value.</p>
    <p class="rgb">Bottom border with a RGB color value.</p>
    <p class="hsl">Bottom border with a HSL color value.</p>
  </body>
</html>
Попробуйте сами »
Внимание

border-bottom-color принимает одно значение цвета. Если указать несколько цветов, будет использован только первый допустимый. Чтобы задать цвет всех четырёх сторон сразу, используйте шорткат border-color.

Значения

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

Связанные свойства

Практика

Практика
Что делает свойство 'border-bottom-color' в CSS?
Что делает свойство 'border-bottom-color' в CSS?
Was this page helpful?