Пошук уроків, статей та іншого контенту
Вивчіть межі елементів: ширину, стиль, колір, окремі сторони та скорочений запис властивості border.
Межа (border) — це лінія навколо внутрішньої частини елемента. Вона розділяє вміст елемента та зовнішній простір.
Межа має три основні характеристики:
ширину;
стиль;
колір.
Наприклад:
.card {
border-width: 2px;
border-style: solid;
border-color: #333;
}Цей запис додасть до елемента .card суцільну темно-сіру межу завтовшки 2px.
border-styleВластивість border-style визначає вигляд межі.
Найчастіше використовують такі значення:
solid — суцільна лінія;
dashed — пунктирна лінія;
dotted — крапкова лінія;
double — подвійна лінія;
none — межа відсутня.
.solid {
border-style: solid;
}
.dashed {
border-style: dashed;
}
.dotted {
border-style: dotted;
}
.double {
border-style: double;
}Якщо для межі не вказати стиль, вона зазвичай не буде видимою, навіть якщо задано ширину та колір.
border-widthВластивість border-width задає товщину межі.
.box {
border-style: solid;
border-width: 4px;
}Для ширини можна використовувати різні одиниці вимірювання. Найчастіше для меж використовують пікселі:
.box {
border-width: 1px;
}Також доступні ключові слова:
thin — тонка межа;
medium — межа середньої товщини;
thick — товста межа.
.thin-border {
border-style: solid;
border-width: thin;
}Для точного керування товщиною краще використовувати конкретне значення, наприклад 1px або 3px.
border-colorВластивість border-color задає колір межі.
.box {
border-style: solid;
border-width: 2px;
border-color: blue;
}Колір можна записати назвою, шістнадцятковим значенням або за допомогою rgb():
.first {
border-color: red;
}
.second {
border-color: #22aa66;
}
.third {
border-color: rgb(40, 100, 200);
}borderЗамість трьох окремих властивостей можна використати скорочений запис border:
.box {
border: 2px solid #333;
}У цьому записі:
2px — ширина;
solid — стиль;
#333 — колір.
Порядок цих значень зазвичай не має значення, але такий порядок є найпоширенішим і найзрозумілішим:
border: ширина стиль колір;Наприклад:
.warning {
border: 3px dashed orange;
}
.success {
border: 2px solid green;
}
.decorative {
border: 5px double purple;
}Значення кольору можна не вказувати. У такому разі браузер використає поточний колір тексту елемента:
.box {
border: 1px solid;
}Проте для передбачуваного результату краще явно задавати колір.
У кожного елемента є чотири сторони:
верхня — top;
права — right;
нижня — bottom;
ліва — left.
Для кожної сторони існують окремі властивості:
.box {
border-top: 2px solid red;
border-right: 3px dashed blue;
border-bottom: 4px double green;
border-left: 1px dotted orange;
}Так можна створити різні межі для кожної сторони елемента.
Окремі характеристики сторони також можна задавати властивостями на кшталт border-top-width:
.box {
border-top-style: solid;
border-top-width: 3px;
border-top-color: black;
}Але в більшості випадків зручніше використовувати скорочений запис для конкретної сторони:
.box {
border-top: 3px solid black;
}Для border-width, border-style і border-color можна передати від одного до чотирьох значень.
Значення застосовуються за таким правилом:
.box {
border-width: 1px 2px 3px 4px;
}Порядок значень:
верхня сторона;
права сторона;
нижня сторона;
ліва сторона.
Це відповідає руху за годинниковою стрілкою.
Якщо вказано два значення:
.box {
border-style: solid dashed;
}перше значення застосовується до верхньої та нижньої сторін;
друге — до правої та лівої сторін.
Якщо вказано три значення:
.box {
border-color: red blue green;
}перше значення — верхня сторона;
друге — права та ліва сторони;
третє — нижня сторона.
Якщо вказано чотири значення:
.box {
border-width: 1px 2px 3px 4px;
}Вони застосовуються окремо до верхньої, правої, нижньої та лівої сторін.
Нижче наведено повний приклад HTML-документа з кількома типами меж:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Межі елементів</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
.example {
background-color: white;
padding: 16px;
margin-bottom: 16px;
}
.solid-border {
border: 2px solid #2563eb;
}
.dashed-border {
border: 3px dashed #16a34a;
}
.different-sides {
border-top: 4px solid #dc2626;
border-right: 2px dashed #2563eb;
border-bottom: 4px double #16a34a;
border-left: 2px dotted #ca8a04;
}
.four-values {
border-width: 1px 3px 5px 7px;
border-style: solid;
border-color: #111827;
}
</style>
</head>
<body>
<h1>Приклади меж</h1>
<div class="example solid-border">
Суцільна синя межа.
</div>
<div class="example dashed-border">
Зелена пунктирна межа.
</div>
<div class="example different-sides">
Для кожної сторони використано окрему межу.
</div>
<div class="example four-values">
Ширина межі різна для кожної сторони.
</div>
</body>
</html>Межа є частиною зовнішнього розміру елемента. Якщо елемент має задану ширину та межу, межа може збільшити простір, який займає елемент.
.box {
width: 200px;
border: 5px solid black;
}За стандартною моделлю коробки ширина межі додається до ширини елемента: по 5px зліва та справа.
Тому фактична ширина такого елемента буде більшою за 200px.
На цьому етапі важливо запам’ятати: додавання межі може змінити загальний розмір елемента.
Межу можна додати до будь-якого елемента, зокрема до заголовка, абзацу або кнопки:
h1 {
border-bottom: 2px solid #333;
}
p {
border: 1px solid #ccc;
}
button {
border: 2px solid #2563eb;
}Властивість border-bottom часто використовують для підкреслення заголовків або розділення блоків:
.title {
border-bottom: 3px solid tomato;
}.box {
border-width: 2px;
border-color: red;
}Межа може не відобразитися, оскільки для неї не задано border-style.
Правильно:
.box {
border: 2px solid red;
}border і outlineborder є частиною розміру елемента та займає місце навколо його вмісту.
outline малюється зовні елемента й має інше призначення. Для створення звичайних меж використовуйте саме border.
У скороченому записі легко забути одну з характеристик:
.box {
border: solid red;
}Такий запис може працювати, але ширина буде використана за замовчуванням. Для зрозумілого коду краще вказувати всі три значення:
.box {
border: 2px solid red;
}border: none зберігає старі властивості.box {
border: 2px solid blue;
border: none;
}Друге правило скасовує видиму межу, оскільки воно записане пізніше. У CSS пізніше правило зазвичай замінює попереднє, якщо вони мають однакову специфічність.
border додає межу навколо елемента.
Межа має ширину, стиль і колір.
Для окремого задання характеристик використовують border-width, border-style і border-color.
Найзручніший скорочений запис має вигляд border: 2px solid red.
Для окремих сторін використовують border-top, border-right, border-bottom і border-left.
Порядок чотирьох значень: верхня, права, нижня, ліва сторони.
Без border-style межа може бути невидимою.
Межа може збільшити загальний розмір елемента.