CSS border-left — межа зліва одним записом
border-left- це універсальна властивість для скороченого запису значень для border-left-color, border-left-style й border-left-width. Ці властивості використовуються для стилізації лівої межі елементів.
Три значення властивості можуть писатися в будь-якій послідовності, й одне або два з них, можуть бути пропущені.
Як і усі універсальні властивості, border-left завжди встановлює значення для всіх доступних властивостей, навіть якщо вони не були вказані(у цьому випадку вони отримають значення без задання).
Наприклад, початкове значення для border-left-style дорівнює none, тобто межа не показується. У випадку відсутності значення для цієї властивості, елемент не матиме межі, навіть якщо будуть прописані border-left-color та border-left-width.
Загальний опис
автор: NagarD
Синтаксис
border-left: border-width border-style border-color|initial|inherit;Властивість border-left може отримувати 5 значень:
-
border-left-width -
Товщина кордону.
автор: Svitlana -
border-left-style -
Стиль кордону.
автор: Svitlana -
border-left-color -
Колір кордону.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | Залежить від використання |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderLeft="5px dotted blue" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Усі межі суцільні, а border-left переписує ліву: товста, подвійна, червона.
HTML
<p>Ліва межа — товста подвійна червона.</p>CSS
p {
border-style: solid;
border-left: thick double #ff0000;
padding: 8px;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-left</strong>.</p>
<p>Вона встановлює лівий кордон для елементу на сторінці. У цьому прикладі Ви мусите вибрати ширину кордону, його форму, а також колір.</p>
<strong>border-left: </strong>
<input type="number" class="input" id="width" value="8" min="0">px
<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>
<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-left: 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 sel = document.querySelector('#select').selectedOptions[0].textContent;
var width = document.querySelector('#width').value;
var color = document.querySelector('#color').value;
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-left', width + 'px ' + sel + ' ' + color));
}));Три однакові цитати. У першої border-left: 4px crimson без стилю, тому смуги немає. Друга оформлена правильно. Третій колір перевизначили повторним скороченням — і рамка зникла зовсім.
HTML
<blockquote class="q a">border-left: 4px crimson — стилю немає, смуги теж</blockquote>
<blockquote class="q b">border-left: 4px solid — так правильно</blockquote>
<blockquote class="q c">border-left: 4px solid, а нижче border-left: crimson — рамка зникла</blockquote>CSS
body {
font-family: sans-serif;
font-size: 14px;
padding: 12px;
}
.q {
margin: 0 0 14px;
padding: 10px 10px 10px 14px;
background-color: #f4f6f8;
}
.a {
border-left: 4px crimson;
}
.b {
border-left: 4px solid #4a6fa5;
}
.c {
border-left: 4px solid #4a6fa5;
border-left: crimson;
}Демонстрація роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>border-left</code> ми можемо встановити для елементу лівий кордон.</p>
<p>Ви бачите три ідентичні блоки, але для двох останніх заданий лівий кордон.</p>
</div>
<div class="wrapper">
<div class="block"></div>
<div class="block solid"></div>
<div class="block dotted"></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;
}
.block.solid {
border-left: 16px solid #444;
}
.block.dotted {
border-left: 16px dotted #444;
}Демонстрація роботи властивості
HTML
<p class="one">Властивість <strong>border-left</strong> - це скорочена форма запису, яка об’єднує <em>border-left-width</em>, <em>border-left-style</em> та <em>border-left-color</em> для лівої межі елементу.
</p>
<p class="two">А ще ці властивості можна задавати окремо...</p>CSS
p {
font-family: sans-serif;
line-height: 1.45;
font-size: 20px;
padding-left: 12px;
}
.one {
border-left: 1em double #666;
}
.two {
border-left-width: 5px;
border-left-style: solid;
border-left-color: grey;
}Приклад використання властивості
HTML
<div class="block">
<code>border-left: 10px solid #666;</code>
</div>CSS
.block {
width: 500px;
height: 250px;
background-color: #eee;
border-left: 10px solid #666;
text-align: center;
font-size: 19px;
padding-top: 18%;
box-sizing: border-box;
}Коментарі
Коментарів ще немає — будьте першим!