CSS border-right-style — стиль правої межі
Властивість border-right-style встановлює стиль правої межі елементу.
Цікаво те, що специфікація не визначає як межі з різними стилями поєднуються в кутах між собою.
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
Ви також можете використовувати
автор: Svitlanaborder-style, щоб задати стилі для всіх меж елементу, абоborder-right, щоб задати всі властивості для правої межі. - Нотатка
-
Значення без задання дорівнює medium. Ви можете змінити ширину межі за допомогою властивостей
автор: Svitlanaborder-right-widthабоborder-width.
Синтаксис
border-right-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Властивість border-right-style може отримувати 12 значень:
-
none -
Кордон не відображається.
автор: Svitlana -
hidden -
Майже те саме що й none, за винятком вирішення конфліктів кордонів для елементів таблиці.
автор: 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
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderRightStyle="dotted" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 9.2 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 14 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Стиль лише правої межі: крапчаста проти суцільних решти.
HTML
<p>Права межа — крапками (dotted), решта суцільні.</p>CSS
p {
border-style: solid;
border-right-style: dotted;
padding: 8px;
}Приклад використання властивості
HTML
<div class="block"></div>CSS
.block {
width: 300px;
height: 200px;
background-color: #ddd;
border: 12px solid #666;
border-right-style: dashed;
}Три ряди. У першому — усі стилі правої межі завтовшки 8px, разом із hidden та none, які не малюють нічого. У другому — double завтовшки 2px і 4px: на двох пікселях подвійної лінії не виходить. У третьому — дві пастки: товщина без стилю та скорочення border-right, написане після стилю.
HTML
<p class="cap">Стилі правої межі, товщина 8px:</p>
<div class="row">
<span class="b s1">solid</span><span class="b s2">dashed</span><span class="b s3">dotted</span>
<span class="b s4">double</span><span class="b s5">groove</span><span class="b s6">ridge</span>
<span class="b s7">inset</span><span class="b s8">outset</span><span class="b s9">hidden</span>
<span class="b s10">none</span>
</div>
<p class="cap">double: 2px проти 4px — тонший малюється суцільним:</p>
<div class="row"><span class="b d2">2px</span><span class="b d4">4px</span></div>
<p class="cap">Дві класичні пастки:</p>
<div class="row">
<span class="b t1">8px без стилю</span>
<span class="b t2">стиль, перебитий скороченням</span>
</div>
<p class="cap">Склеєна таблиця: hidden прибирає спільну межу, товща виграє:</p>
<table>
<tr><td class="hid">hidden</td><td class="fat">сусід 6px</td></tr>
<tr><td class="wide">10px</td><td class="thin">2px</td></tr>
</table>CSS
.cap {
margin: 16px 0 6px;
font: 600 .9em/1.4 system-ui, sans-serif;
color: #5a6472;
}
.b {
display: inline-block;
width: 92px;
padding: 8px 6px;
margin: 0 8px 8px 0;
background: #eef1f5;
border-right-width: 8px;
border-right-color: #c0392b;
font: 12px/1.3 system-ui, sans-serif;
}
.s1 { border-right-style: solid; }
.s2 { border-right-style: dashed; }
.s3 { border-right-style: dotted; }
.s4 { border-right-style: double; }
.s5 { border-right-style: groove; }
.s6 { border-right-style: ridge; }
.s7 { border-right-style: inset; }
.s8 { border-right-style: outset; }
.s9 { border-right-style: hidden; }
.s10 { border-right-style: none; }
.d2 {
border-right-width: 2px;
border-right-style: double;
}
.d4 {
border-right-width: 4px;
border-right-style: double;
}
.t1 {
border-right-width: 8px;
}
.t2 {
border-right-style: dashed;
border-right: 8px #c0392b;
}
table {
border-collapse: collapse;
font: 13px/1.4 system-ui, sans-serif;
}
td {
padding: 8px 10px;
border: 3px solid #8a94a6;
background: #eef1f5;
}
.hid {
border-right-style: hidden;
}
.fat {
border-left: 6px solid #c0392b;
}
.wide {
border-right: 10px solid #c0392b;
}
.thin {
border-left: 2px solid #2f6fd0;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-right-style</strong>.</p>
<p>Вона встановлює форму правого кордону для елемента на сторінці.</p>
<strong>border-right-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>
<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>
<option value="none" name="value2">none</option>
</select>
<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;
}
.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;
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-right-style', sel));
}));Демонстрація роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>border-right-style</code> ми можемо визначити стиль правого кордону елемента.</p>
</div>
<div class="wrapper">
<div class="block"></div>
<div class="block dashed">border-right-style: dashed;</div>
<div class="block dotted">border-right-style: dotted;</div>
<div class="block double">border-right-style: double;</div>
<div class="block groove">border-right-style: groove;</div>
<div class="block ridge">border-right-style: ridge;</div>
<div class="block inset">border-right-style: inset;</div>
<div class="block outset">border-right-style: outset;</div>
<div class="block none">border-right-style: none;</div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 17px;
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: 150px;
background-color: gold;
border: 10px solid #444;
margin-bottom: 20px;
}
.block.dashed {
border-right-style: dashed;
}
.block.dotted {
border-right-style: dotted;
}
.block.double {
border-right-style: double;
}
.block.groove {
border-right-style: groove;
}
.block.ridge {
border-right-style: ridge;
}
.block.inset {
border-right-style: inset;
}
.block.outset {
border-right-style: outset;
}
.block.none {
border-right-style: none;
}Демонстрація роботи властивості
HTML
<div class="content">
<p>Права межа цього елменту стилізована <br> за допомогою властивості <strong><code>border-right-style</code></strong>.</p>
</div>CSS
.content {
font-family: sans-serif;
line-height: 1.45;
font-size: 17px;
padding-right: 16px;
width: 500px;
border-right-width: 10px;
border-right-color: #666;
border-right-style: double;
}Коментарі
Коментарів ще немає — будьте першим!