CSS border — рамка елемента одним рядком
Властивість border - універсальна властивість і дозволяє одночасно задати значення таким властивостям як:
- border-width
- border-style
- border-color
Значення можуть йти в будь-якому порядку, розділяючись пробілом, браузер сам визначить, яке з них відповідає потрібній властивості.
Для встановлення кордону тільки на певних сторонах елементу, скористайтеся властивостями border-top, border-bottom, border-left, border-right.
Як і з усіма скороченими записами, окреме значення, яке не вказане отримає свої значення без задання. Важливо те, що border не може бути використаний для встановлення background-image, але скидає значення цієї властивості до початкового, тобто none.
Загальний опис
автор: NagarD
- Нотатка
-
Рекомендується використовувати
автор: Svitlanaborderтільки, щоб задати усіborder-властивості одночасно. В той час, якborder-width,border-styleтаborder-colorдозволяють задавати 4 різні значення для всіх сторін окремо, аborderвстановлює одне однакове значення для всіх сторін. - Нотатка
-
Браузер Internet Explorer до шостої версії включно при товщині кордону 1px відображає dotted як dashed. При товщині 2px і вище значення dotted працює коректно. Ця помилка виправлена в IE7, але тільки для всіх кордонів товщиною 1px. Якщо одна з меж блоку має товщину 2px і вище, то в IE7 значення dotted перетворюється в dashed. Internet Explorer до версії 7.0 включно не підтримує значення inherit.
автор: Svitlana
Синтаксис
border: border-width border-style border-color|initial|inherit;Властивість border може отримувати 5 значень:
-
border-width -
Визначає ширину кордону.
автор: Svitlana -
border-style -
Визначає стиль кордону.
автор: Svitlana -
border-color -
Визначає колір кордону.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)
автор: Svitlana
| Значення без задання: | medium none color |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.border="3px solid blue" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Універсальний запис рамки: товщина, стиль і колір однією декларацією.
HTML
<div class="box">Рамка: 1px, суцільна, червона — все одним рядком.</div>CSS
.box {
border: 1px solid #ff0000;
padding: 12px;
}Демонстрація використання властивості
HTML
<div class="info">
<p>За допомогою властивості <code>border</code> ми можемо встановити для елементу кордон.</p>
<p>Нижче розташовані три ідентичні блоки, але для двох останніх заданий кордон.</p>
</div>
<div class="wrapper">
<div class="block"></div>
<div class="block solid"></div>
<div class="block dashed"></div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 17px;
}
.info {
padding: 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: 16px solid #444;
}
.block.dashed {
border: 16px dashed #444;
}Приклад роботи властивості
HTML
<div class="block none">
border: 2px none #000;
</div>
<div class="block hidden">
border: 1px hidden #000;
</div>
<div class="block dotted">
border: 1px dotted #ff0000;
</div>
<div class="block dashed">
border: 4px dashed pink;
</div>
<div class="block solid">
border: 1px solid green;
</div>
<div class="block double">
border: 10px double #666;
</div>
<div class="block groove">
border: 1em groove #252525;
</div>
<div class="block ridge">
border: thick ridge #909090;
</div>
<div class="block inset">
border: medium inset lightblue;
</div>
<div class="block outset">
border: thin outset rgb(0, 125, 125);
</div>CSS
.block {
width: 400px;
height: 100px;
margin: 16px auto;
text-align: center;
line-height: 100px;
background-color: #eee;
font-family: monospace;
color: #222;
}
.none {
border: 2px none #000;
}
.hidden {
border: 1px hidden #000;
}
.dotted {
border: 3px dotted #ff0000;
}
.dashed {
border: 4px dashed pink;
}
.solid {
border: 1px solid green;
}
.double {
border: 10px double #666;
}
.groove {
border: 1em groove #252525;
}
.ridge {
border: thick ridge #909090;
}
.inset {
border: medium inset lightblue;
}
.outset {
border: thin outset rgb(0, 125, 125);
}Обидва блоки мають width: 200px, але рамка по 12 пікселів у першого додається до ширини, а в другого вміщується всередину завдяки box-sizing: border-box. Червона лінія — рівно 200 пікселів для порівняння.
HTML
<p>box-sizing: content-box (без задання) — 200px + рамка</p>
<div class="box">width: 200px</div>
<p>box-sizing: border-box — рамка входить у 200px</p>
<div class="box bb">width: 200px</div>
<div class="ruler">рівно 200px</div>CSS
body {
font-family: monospace;
font-size: 14px;
padding: 12px;
background-color: #f4f4f4;
}
p {
margin: 16px 0 6px;
color: #444;
}
.box {
width: 200px;
padding: 10px;
border: 12px solid #4a6fa5;
background-color: #ffd166;
}
.bb {
box-sizing: border-box;
}
.ruler {
width: 200px;
margin-top: 14px;
padding-top: 4px;
border-top: 2px dashed #c0392b;
color: #c0392b;
}Проста демонстрація використання властивості border
HTML
<div class="block">
<code>border: 4px solid #666;</code>
</div>CSS
.block {
border: 4px solid #666;
width: 250px;
height: 250px;
text-align: center;
padding-top: 105px;
box-sizing: border-box;
}Динамічний приклад
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));
}));Коментарі
Коментарів ще немає — будьте першим!