CSS border-bottom-style — стиль нижньої рамки

Властивість border-bottom-style встановлює стиль нижньої межі елементу.

Цікаво те, що специфікація не визначає як межі з різними стилями поєднуються в кутах між собою.

Ви також можете використовувати border-style, щоб задати стилі для всіх меж елементу, або border-bottom, щоб задати всі властивості для нижньої межі.

Значення без задання дорівнює medium. Ви можете змінити ширину межі за допомогою властивостей border-bottom-width або border-width

правити

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

правити

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

Синтаксис

border-bottom-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

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

none

Границя не відображається

автор: Svitlana

правити

hidden

Має той же ефект, що і none за винятком застосування border-bottom-style до комірок таблиці, у якій значення властивості border-collapse встановлено як collapse. У цьому випадку нижня межа в комірці не буде відображатися взагалі.

автор: Svitlana

правити

dotted

Кордон з точок.

автор: Svitlana

правити

dashed

Пунктирний кордон.

автор: Svitlana

правити

solid

Суцільний кордон.

автор: Svitlana

правити

double

Подвійний кордон

автор: Svitlana

правити

groove

Рифлений 3D кордон.

автор: Svitlana

правити

ridge

Ребристий 3D кордон.

автор: Svitlana

правити

inset

Урізаний (звеpxу-справа) 3D кордон.

автор: Svitlana

правити

outset

Урізаний (знизу-зліва) 3D кордон.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	1	1	1	9.2	12	5.5

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

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

Приклади

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

<p>Нижня межа — крапками (dotted), решта суцільні.</p>

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

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

<div class="wrapper">
	<div class="block"></div>
	<div class="block dashed">border-bottom-style: dashed;</div>
	<div class="block dotted">border-bottom-style: dotted;</div>
  <div class="block double">border-bottom-style: double;</div>
  <div class="block groove">border-bottom-style: groove;</div>
  <div class="block ridge">border-bottom-style: ridge;</div>
  <div class="block inset">border-bottom-style: inset;</div>
  <div class="block outset">border-bottom-style: outset;</div>  
  <div class="block none">border-bottom-style: none;</div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 20px;
	line-height: 1.45;
  text-align: center;
}

.info {
	padding: 4px 16px 8px 16px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
  flex-wrap: wrap;
	justify-content: space-around;
}

.block {
	width: 150px;
	height: 140px;
	background-color: gold;
	border: 10px solid #444;
  margin-bottom: 20px;
}

.block.dashed {
	border-bottom-style: dashed;
}

.block.dotted {
	border-bottom-style: dotted;
}

.block.double {
	border-bottom-style: double;
}

.block.groove {
	border-bottom-style: groove;
}

.block.ridge {
	border-bottom-style: ridge;
}

.block.inset {
	border-bottom-style: inset;
}

.block.outset {
	border-bottom-style: outset;
}

.block.none {
	border-bottom-style: none;
}

<div class="i none">border-bottom-style: none (типово)</div>
<div class="i solid">solid</div>
<div class="i dashed">dashed</div>
<div class="i dotted">dotted</div>
<div class="i double">double</div>
<div class="i groove">groove</div>

.i {
    width: 300px;
    padding: 8px 0;
    margin-bottom: 12px;
    font: 14px sans-serif;
    border-bottom-width: 6px;
    border-bottom-color: #4a6fa5;
}
.none   { border-bottom-style: none; }
.solid  { border-bottom-style: solid; }
.dashed { border-bottom-style: dashed; }
.dotted { border-bottom-style: dotted; }
.double { border-bottom-style: double; }
.groove { border-bottom-style: groove; }

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-bottom-style</strong>.</p>

<p>Вона встановлює форму нижнього кордону для елемента на сторінці.</p>

<strong>border-bottom-style: </strong>
<select class="input" id="select">
  <option value="solid" name="value2" selected>solid</option>
  <option value="dashed" name="value2">dashed</option>
  <option value="dotted" name="value2">dotted</option>
</select> 
<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: 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 sel = document.querySelector('#select').selectedOptions[0].textContent;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-bottom-style', sel));
}));

<div class="content">
  <p>Нижня межа цього елементу стилізована <br> за допомогою властивості <strong><code>border-bottom-style</code></strong>.</p>
</div>

.content {
  font-family: sans-serif;
  line-height: 1.45;
  font-size: 17px;
  
  border-bottom-width: 10px;
  border-bottom-color: #666;
  border-bottom-style: double;
}

<div class="block"></div>

.block {
	width: 300px;
	height: 200px;
	background-color: #ddd;
	border: 12px solid #666;
	border-bottom-style: dashed;
}