CSS border-right — межа справа одним записом
border-right - це універсальна властивість для скороченого запису значень для border-right-color, border-right-style й border-right-width. Ці властивості використовуються для стилізації правої межі елементів.
Три значення властивості можуть писатися в будь-якій послідовності, й одне або два з них, можуть бути пропущені.
Як і усі універсальні властивості, border-right завжди встановлює значення для всіх доступних властивостей, навіть якщо вони не були вказані(у цьому випадку вони отримають значення без задання).
Наприклад, початкове значення для border-right-style дорівнює none, тобто межа не показується. У випадку відсутності значення для цієї властивості, елемент не матиме межі, навіть якщо будуть прописані border-right-color та border-right-width.
Загальний опис
автор: NagarD
Синтаксис
border-right: border-width border-style border-color|initial|inherit;Властивість border-right може отримувати 5 значень:
-
border-right-width -
Значення задає товщину кордону.
автор: Svitlana -
border-right-style -
Значення задає стиль кордону. Приймає декілька значень:
автор: Svitlanadotted,dashed,solid,double,groove,ridge,inset,outset. -
border-right-color -
Встановлює колір кордону, значення може бути в будь-якому допустимому для CSS форматі.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента
автор: Svitlana
| Значення без задання: | Залежить від використання |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderRight="5px dotted blue" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 9.2 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Демонстрація роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>border-right</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-right: 16px solid #444;
}
.block.dotted {
border-right: 16px dotted #444;
}Усі межі суцільні, а border-right переписує праву: товста, подвійна, червона.
HTML
<p>Права межа — товста подвійна червона.</p>CSS
p {
border-style: solid;
border-right: thick double #ff0000;
padding: 8px;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-right</strong>.</p>
<p>Вона встановлює правий кордон для елементу на сторінці. У цьому прикладі Ви мусите вибрати ширину кордону, його форму, а також колір.</p>
<div class="wrap">
<strong>border-right: </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>
<option value="double" name="value2">double</option>
<option value="groove" name="value2">groove</option>
<option value="ridge" name="value2">ridge</option>
<option value="inset" name="value2">inset</option>
<option value="outset" name="value2">outset</option>
</select>
<input type="color" class="input" id="color" value="#F74C32">
<strong>;</strong>
</div>
</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-right: 8px solid #F74C32;
}
.input {
margin-bottom: 36px;
width: 75px;
}
#select {
position: relative;
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-right', width + 'px ' + sel + ' ' + color));
}));У першого блока стиль межі не вказано, тому border-right: 6px #dd3333 не малює нічого — типове значення стилю none. Другий відрізняється лише словом solid, і межа з'являється.
HTML
<div class="a">border-right: 6px #dd3333 — межі немає</div>
<div class="b">border-right: 6px solid #dd3333 — межа є</div>CSS
div {
margin-bottom: 10px;
padding: 10px;
background: #eef2f7;
}
.a {
border-right: 6px #dd3333;
}
.b {
border-right: 6px solid #dd3333;
}Демонстрація роботи властивості
HTML
<p class="one">Властивість <strong>border-right</strong> - це скорочена форма запису, яка об’єднує <em>border-right-width</em>, <em>border-right-style</em> та <em>border-right-color</em> для правої межі елементу.
</p>
<p class="two">А ще ці властивості можна задавати окремо...</p>CSS
p {
font-family: sans-serif;
line-height: 1.45;
font-size: 20px;
padding-right: 12px;
}
.one {
border-right: 1em double #666;
}
.two {
border-right-width: 5px;
border-right-style: solid;
border-right-color: grey;
}Приклад використання властивості
HTML
<div class="block">
<code>border-right: 10px solid #666;</code>
</div>CSS
.block {
width: 500px;
height: 250px;
background-color: #eee;
border-right: 10px solid #666;
text-align: center;
font-size: 19px;
padding-top: 18%;
box-sizing: border-box;
}Коментарі
Коментарів ще немає — будьте першим!