CSS border-bottom — рамка знизу елемента

Властивість border-bottom - універсальна властивість і дозволяє одночасно задати значення:

• border-bottom-width
• border-bottom-style
• border-bottom-color

Усі три властивості можуть бути написані в довільному порядку, розділені пробілом. Браузер сам визначить, яке з них відповідає потрібній властивості. Одною або двома з них можна знехтувати, тоді вони отримають значення без задання. Це дуже важливо, оскільки як й усі властивості для скороченого запису, border-bottom задає значення властивості навіть якщо вона не була оголошена.

правити

Загальний опис

правити

Нотатка

Браузер Internet Explorer до шостої версії включно при товщині кордону 1px відображає dotted як dashed. При товщині 2px і вище значення dotted працює коректно. Ця помилка виправлена в IE7, але тільки для всіх кордонів товщиною 1px. Якщо одна з меж блоку має товщину 2px і вище, то в IE7 значення dotted перетворюється в dashed. Internet Explorer до версії 7.0 включно не підтримує значення inherit.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

border-bottom: border-width border-style border-color|initial|inherit;

Властивість border-bottom може отримувати 5 значень:

border-bottom-width

Визначає ширину нижньої межі. Значення за замовчуванням - "middle"

автор: Svitlana

правити

border-bottom-style

Визначає стиль нижньої межі. Значення за умовчанням - "none"

автор: Svitlana

правити

border-bottom-color

Вказує колір нижньої межі. Значення за замовчуванням - це колір тексту

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3.5	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p>Нижня межа — товста крапчаста червона, решта лишаються суцільними чорними.</p>

p {
    border-style: solid;
    border-bottom: thick dotted #ff0000;
    padding: 8px;
}

<a class="jumpy" href="#">Наведи — я стрибну</a>
<a class="calm" href="#">Наведи — я на місці</a>
<p>Цей абзац показує стрибок: він з'їжджає вниз разом із межею.</p>

a {
    display: block;
    width: 260px;
    padding: 10px;
    background: #f0f4f8;
    color: #0172ad;
    text-decoration: none;
}

.jumpy:hover {
    border-bottom: 6px solid #0172ad;
}

.calm {
    border-bottom: 6px solid transparent;
}

.calm:hover {
    border-bottom-color: #d81b60;
}

<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>

* {
  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;
}

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));
}));

<div class="info">
	<p>За допомогою властивості <code>border-bottom</code> ми можемо встановити для елементу нижній кордон.</p>
	<p>Ви бачите три ідентичні блоки, але для двох останніх заданий нижній кордон.</p>
</div>

<div class="wrapper">
	<div class="block"></div>
	<div class="block solid"></div>
	<div class="block dotted"></div>
</div>

* {
	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;
}

.block.solid {
	border-bottom: 16px solid #444;
}

.block.dotted {
	border-bottom: 16px dotted #444;
}

<div class="block">
  <code>border-bottom: 10px solid #666;</code>
</div>

.block {
  width: 500px;
  height: 250px;
  background-color: #eee;
  border-bottom: 10px solid #666;
  text-align: center;
  font-size: 19px;
  padding-top: 18%;
  box-sizing: border-box;
}