border-left-width в CSS — товщина лівої межі блока
автор: Svitlana
Загальний опис
автор: NagarD
- Порада
-
Ви також можете використовувати
автор: Svitlanaborder-width, щоб задати товщину для всіх меж елементу, абоborder-left, щоб задати всі властивості для лівої межі. - Порада
-
Завжди оголошуйте властивість
автор: Svitlanaborder-styleперед властивістюborder-left-width. У елемента мають бути визначені кордони, перш ніж Ви зможете змінити їх колір.
Синтаксис
border-left-width: medium|thin|thick|length|initial|inherit;Властивість border-left-width може отримувати 6 значень:
-
medium -
Лінія середньої товщини (3 пікселі)
автор: Svitlana -
thin -
Тонка лінія. Значення в пікселях може змінюватися в залежності від браузера, але зазвичай становить 1 піксель
автор: Svitlana -
thick -
Лінія великої товщини (6 пікселів)
автор: Svitlana -
length -
Для точного встановлення товщини можна використовувати будь-які одиниці прийняті в CSS.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | medium |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderLeftWidth="5px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2.2 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Товщина лише лівої межі: 15px проти типової в інших сторін.
HTML
<p>Ліва межа — 15 пікселів, решта типової товщини.</p>CSS
p {
border-style: solid;
border-left-width: 15px;
padding: 8px;
}Демонстрація роботи властивості
HTML
<div class="content">
<p>Товщина лівої межі цього елементу стилізована <br> за допомогою властивості <strong><code>border-left-width</code></strong>.</p>
</div>CSS
.content {
font-family: sans-serif;
line-height: 1.45;
font-size: 17px;
padding-left: 16px;
border-left-width: 4px;
border-left-color: #666;
border-left-style: solid;
}Демонстрація роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>border-left-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-left-width: 40px;
}
.block.two {
border-left-width: 4px;
}Приклад використання властивості
HTML
<div class="block"></div>CSS
.block {
width: 300px;
height: 200px;
background-color: #ddd;
border: 4px solid #666;
border-left-width: 16px;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-left-width</strong>.</p>
<p>Вона встановлює ширину лівого кордону елемента.</p>
<strong>border-left-width: </strong>
<input type="number" class="input" id="num" value="24" min="0">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: 16px solid #444;
border-left-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-left-width', num + 'px'));
}));Угорі — три ключові слова й чотири пастки: товщина без стилю, недійсний відсоток, дробові пікселі (2.6px стає двома, 0.4px — одним) і різниця між content-box та border-box за однакової заданої ширини 200px. Унизу — правостороння смужка: border-inline-start-width у блоці з direction: rtl ставить межу праворуч, а border-left-width лишається ліворуч. Останній ряд — склеєна таблиця, де hidden стирає навіть товсту межу сусіда.
HTML
<p class="cap">Ключові слова (стиль скрізь solid):</p>
<div class="row">
<span class="bx thin">thin</span>
<span class="bx medium">medium</span>
<span class="bx thick">thick</span>
</div>
<p class="cap">Пастки:</p>
<div class="row">
<span class="bx nostyle">8px без стилю</span>
<span class="bx percent">50% — недійсно</span>
<span class="bx frac26">2.6px → 2px</span>
<span class="bx frac04">0.4px → 1px</span>
</div>
<p class="cap">Однакова задана ширина 200px, різний box-sizing:</p>
<div class="content-box">content-box</div>
<div class="border-box">border-box</div>
<p class="cap">Правостороннє письмо: логічна межа переїхала, фізична — ні:</p>
<div class="rtl logical">border-inline-start-width: 10px</div>
<div class="rtl physical">border-left-width: 10px</div>
<p class="cap">Склеєна таблиця: hidden на лівій межі правої комірки стирає стик:</p>
<table>
<tr>
<td class="fat">12px праворуч</td>
<td class="hid">hidden ліворуч</td>
<td>звичайна</td>
</tr>
</table>CSS
.cap {
margin: 18px 0 6px;
font: 600 .9em/1.4 system-ui, sans-serif;
color: #5a6472;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.bx {
padding: 8px 10px;
background: #eef1f5;
border-left-style: solid;
border-left-color: #c0392b;
font: 13px/1.3 system-ui, sans-serif;
}
.thin { border-left-width: thin; }
.medium { border-left-width: medium; }
.thick { border-left-width: thick; }
.nostyle {
border-left-style: none;
border-left-width: 8px;
}
.percent { border-left-width: 50%; }
.frac26 { border-left-width: 2.6px; }
.frac04 { border-left-width: 0.4px; }
.content-box,
.border-box {
width: 200px;
margin-bottom: 6px;
padding: 6px 8px;
background: #eef1f5;
border-left: 20px solid #2f6fd0;
font: 13px/1.3 system-ui, sans-serif;
}
.border-box {
box-sizing: border-box;
border-left-color: #72b043;
}
.rtl {
direction: rtl;
width: 260px;
margin-bottom: 6px;
padding: 6px 8px;
background: #eef1f5;
border-style: solid;
border-color: #c0392b;
border-width: 0;
font: 13px/1.3 system-ui, sans-serif;
}
.logical {
border-inline-start-width: 10px;
}
.physical {
border-left-width: 10px;
}
table {
border-collapse: collapse;
font: 13px/1.4 system-ui, sans-serif;
}
td {
padding: 8px 10px;
background: #eef1f5;
border: 4px solid #8a94a6;
}
.fat {
border-right: 12px solid #c0392b;
}
.hid {
border-left-style: hidden;
}Коментарі
Коментарів ще немає — будьте першим!