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

Базовая поддержка Широко доступно

Эта возможность хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

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

Попробуйте

border-bottom-color: red;

border-bottom-color: #32a1ce;

border-bottom-color: rgb(170 50 220 / 0.6);

border-bottom-color: hsl(60 90% 50% / 0.8);

border-bottom-color: transparent;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Синтаксис

/* <color> values */
border-bottom-color: red;
border-bottom-color: #ffbb00;
border-bottom-color: rgb(255 0 0);
border-bottom-color: hsl(100deg 50% 25% / 75%);
border-bottom-color: currentColor;
border-bottom-color: transparent;

/* Global values */
border-bottom-color: inherit;
border-bottom-color: initial;
border-bottom-color: revert;
border-bottom-color: revert-layer;
border-bottom-color: unset;

Значения

Для этого свойства указывается одно значение:

color: Цвет нижней границы.

Формальное определение

Начальное значение	currentcolor
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	вычисленный цвет
Тип анимации	a <a href="/en-US/docs/Web/CSS/Reference/Values/color_value#interpolation" title="Значения типа данных CSS <color> интерполируются по каждой из красной, зелёной и синей компонент, каждая из которых обрабатывается как действительное число с плавающей точкой. Обратите внимание, что интерполяция цветов выполняется в цветовом пространстве sRGBA с предварительно умноженным альфа-каналом, чтобы избежать появления неожиданных серых цветов.">color</a>

Формальный синтаксис

border-bottom-color = 
  <'border-top-color'>

Примеры

Блок div с границей

HTML

<div class="my-box">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="red-text">red</span>.
  </p>
</div>

CSS

.my-box {
  border: solid 0.3em gold;
  border-bottom-color: red;
  width: auto;
}

.red-text {
  color: red;
}

Результат

Спецификации

Спецификация
Модуль фонов и границ CSS, уровень 3 # border-color

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`border-bottom-color`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4	1
`currentColor`	1	12	1.5	9.5	4	18	4	14	3.2	1.0	37	3.2
`transparent`	1	12	1	15	1	18	4	14	1	1.0	4.4	1

См. также

Сокращённые свойства CSS, связанные с границами: border, border-bottom и border-color.
Свойства CSS, задающие цвет других границ: border-right-color, border-top-color и border-left-color.
Другие свойства CSS, относящиеся к той же границе: border-bottom-style и border-bottom-width.
Значение цвета currentColor по умолчанию.

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-bottom-color