border-bottom-width в CSS — товщина нижньої межі блока

HTML

<p>Нижня межа — 15 пікселів, решта типової товщини.</p>

CSS

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

HTML

<div class="box">

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

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

<strong>border-bottom-width: </strong>
<input type="number" class="input" id="num" value="24">px
<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: 8px solid #F74C32;
  border-bottom-width: 24px;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

JS

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var num = document.querySelector('#num').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-bottom-width', num + 'px'));
}));

HTML

<p class="cap">Межа проти підкреслення:</p>
<div class="demo">
    <p class="bordered">Короткий текст із нижньою межею</p>
    <p class="underlined">Короткий текст із підкресленням</p>
    <p class="bordered wide">Довгий текст, що займає кілька рядків: нижня межа
        з'явиться лише під усією коробкою, унизу.</p>
    <p class="underlined wide">Довгий текст, що займає кілька рядків: підкреслення
        повторюється на кожному рядку й закінчується разом зі словами.</p>
</div>

<p class="cap">Ключові слова й товщина без стилю:</p>
<div class="row">
    <span class="bx thin">thin</span>
    <span class="bx medium">medium</span>
    <span class="bx thick">thick</span>
    <span class="bx nostyle">10px без стилю</span>
</div>

<p class="cap">Трикутник із самих меж:</p>
<div class="tri-wrap">
    <span class="tri"></span>
    <span class="tri-open"></span>
</div>
<p class="note">Ліворуч бічні межі прозорі — видно чистий трикутник.
    Праворуч вони пофарбовані сірим, і стає видно ті самі діагоналі.</p>

CSS

.cap {
    margin: 18px 0 6px;
    font: 600 .9em/1.4 system-ui, sans-serif;
    color: #5a6472;
}

.demo p {
    width: 320px;
    margin: 0 0 12px;
    font: 14px/1.6 system-ui, sans-serif;
}

.bordered {
    border-bottom: 4px solid #c0392b;
}

.underlined {
    text-decoration: underline 4px #c0392b;
    text-underline-offset: 3px;
}

.bx {
    display: inline-block;
    margin: 0 10px 10px 0;
    padding: 8px 10px;
    background: #eef1f5;
    border-bottom-color: #2f6fd0;
    border-bottom-style: solid;
    font: 13px/1.3 system-ui, sans-serif;
}

.thin { border-bottom-width: thin; }
.medium { border-bottom-width: medium; }
.thick { border-bottom-width: thick; }

.nostyle {
    border-bottom-style: none;
    border-bottom-width: 10px;
}

.tri-wrap {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.tri,
.tri-open {
    display: block;
    width: 0;
    height: 0;
    border-bottom: 46px solid #f2b134;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
}

.tri-open {
    border-left-color: #b9c6d8;
    border-right-color: #d3d9e2;
}

.note {
    max-width: 460px;
    margin: 8px 0 0;
    color: #5a6472;
    font: .9em/1.5 system-ui, sans-serif;
}

HTML

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

<div class="wrapper">
	<div class="block"></div>
	<div class="block one"></div>
	<div class="block two"></div>
</div>

CSS

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
	line-height: 1.45;
}

.info {
	padding: 4px 16px 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.one {
	border-bottom-width: 40px;
}

.block.two {
	border-bottom-width: 4px;
}

HTML

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

CSS

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

HTML

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

CSS

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