CSS border-bottom-color — колір нижньої межі
Властивість border-bottom-color встановлює колір нижньої межі елементу.
Ви також можете використовувати border-color, щоб задати колір для всіх меж, або border-bottom, щоб встановити ширину, стиль та колір для нижньої межі у скороченому записі.
Значення без задання currentColor (який дорівнює властивості color).
Перед тим як межа може бути показана, вона мусить мати встановлене значення для border-style (для всіх меж) або border-bottom-style (тільки для нижньої межі).
Загальний опис
автор: NagarD
- Порада
-
Завжди оголошуйте властивість
автор: Svitlanaborder-styleперед власностюborder-bottom-color. Елемент повинен мати кордони, перш ніж ви зможете змінити їх колір. - Порада
-
Рекомендується використовувати скорочені записи за допомогою
автор: Svitlanaborder-colorабоborder-bottom.
Синтаксис
border-bottom-color: color|transparent|initial|inherit;Властивість border-bottom-color може отримувати 4 значень:
-
color -
Встановлює колір кордону. Колір в стилях можна задавати різними способами: за шістнадцятиричним значенням, за назвою, в форматі
автор: SvitlanaRGB, RGBA, HSL, HSLA. -
transparent -
Встановлює прозорий колір.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання.
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | Поточний колір елемента |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderBottomColor="blue" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Колір лише нижньої межі: вона червона, решта — типового кольору тексту.
HTML
<p>Нижня межа червона, решта — чорні.</p>CSS
p {
border-style: solid;
border-bottom-color: #ff0000;
padding: 8px;
}Прозора межа тримає місце заздалегідь: у другому посиланні рамка з'являється лише на наведенні, і текст стрибає.
HTML
<p><a class="steady" href="#">Стабільне посилання</a> — межа є завжди, змінюється лише її колір.</p>
<p><a class="jumpy" href="#">Стрибуче посилання</a> — межа з'являється аж на наведенні.</p>CSS
body {
font-family: sans-serif;
font-size: 18px;
line-height: 1.8;
padding: 16px;
}
a {
color: #06c;
text-decoration: none;
}
.steady {
border-bottom: 2px solid;
border-bottom-color: transparent;
}
.steady:hover {
border-bottom-color: #06c;
}
.jumpy:hover {
border-bottom: 2px solid #06c;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-bottom-color</strong>.</p>
<p>Вона встановлює колір для нижнього кордону елемента на сторінці.</p>
<strong>border-bottom-color: </strong>
<input type="color" class="input" id="color" value="#F74C32">
<strong>;</strong>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 16px;
line-height: 1.45;
height: 100vh;
padding: 16px;
}
.box {
background-color: #f7f7f7;
padding: 16px;
border-bottom: 8px solid #F74C32;
}
.input {
margin-bottom: 36px;
width: 75px;
}
#select {
position: relative;
top: -4px;
width: 100px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var color = document.querySelector('#color').value;
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-bottom-color', color));
}));Приклад використання властивості
HTML
<div class="info">
<p>За допомогою властивості <code>border-bottom-color</code> ми можемо встановити колір для нижнього кордону елементу.</p>
<p>Ви бачите три блоки з ідентичним загальним кордоном, але різними кольорами для нижнього.</p>
</div>
<div class="wrapper">
<div class="block solid"></div>
<div class="block rgba"></div>
<div class="block word"></div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 17px;
line-height: 1.45;
}
.info {
padding: 8px 16px;
}
code {
font-weight: 700;
color: #444;
border-bottom: 2px solid #666;
}
.wrapper {
display: flex;
justify-content: space-around;
}
.block {
width: 150px;
height: 150px;
background-color: gold;
border: 16px solid #444;
}
.block.solid {
border-bottom-color: #ff0000;
}
.block.rgba {
border-bottom-color: rgba(0, 0, 0, .45);
}
.block.word {
border-bottom-color: green;
}Демонстрація роботи властивості
HTML
<div class="block">
<p><em>border-bottom-color</em> змінює колір тільки нижньої межі. Всі інші стилізуються від <em>border</em>.</p>
</div>CSS
.block {
height: 250px;
width: 500px;
background-color: #ddd;
text-align: center;
line-height: 1.45;
font-size: 18px;
font-family: monospace;
padding-top: 6%;
box-sizing: border-box;
border: 12px solid #252525;
border-bottom-color: #ff0000;
}Приклад використання властивості
HTML
<div class="block">
<code>border-bottom-style: solid;<br>
<strong>border-bottom-color: #666;</strong> </code>
</div>CSS
.block {
width: 400px;
height: 250px;
background-color: #eee;
border-bottom-style: solid;
border-bottom-color: #666;
text-align: center;
padding-top: 18%;
box-sizing: border-box;
line-height: 1.45;
font-size: 17px;
}Коментарі
Коментарів ще немає — будьте першим!