CSS border-radius — заокруглення кутів
Властивість border-radius - універсальна властивість і дозволяє одночасно задати значення округлень всіх кутів.
Якщо вказано тільки одне значення для властивості, цей радіус буде застосований до всіх 4 кутів.
Тим не менш, ви можете вказати кожен кут окремо. Ось правила:
| Кількість значень | Результат |
|---|---|
| 1 | Всі чотири кути закруглені однаково. |
| 2 | Перше значення відноситься до верхнього лівого і нижнього правого кута, а друге значення відноситься до верхнього правого кута і лівого нижнього кута. |
| 3 | Перше значення відноситься до верхнього лівого, друге значення - до верхнього правого і нижнього лівого, і третє значення відноситься до нижнього правого кута. |
| 4 | Перше значення застосовується до верхнього лівого, друге значення застосовується до верхнього правого, третє значення відноситься до нижнього правого, і четверте значення відноситься до нижнього лівого кута. |
У разі застосування відсотків, відлік ведеться відносно ширини блоку.
Щоб встановити різні значення для горизонтальної та вертикальної частини, треба розділити два значення за допомогою “/”. Значення з лівої сторони, випливають на горизонтальні частини кутів, правої частини - вертикальні частини. Також можна записувати відразу чотири значення(по два з кожної сторони), для кожного кута окремо.
border-radius може використовуватися разом із властивістю border(чи з будь-якими іншими властивостями стилізуючими межі елементу), але це не обов’язково. Наприклад, якщо для елементу встановлене фонове зображення або колір, він буде так само заокруглюватися, навіть якщо властивість border не була задана.
Важливо, що треба записувати значення саме у такому порядку: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
Крива кожного кутку визначається двома значеннями: якщо одне(або два однакових) - кут заокруглюється до круга, два різних - еліпс.
border-radius не застосовується до елементів таблиці, якщо для border-collapse встановлене значення collapse.
Загальний опис
автор: NagarD
- Нотатка
-
Запис:
border-radius: 2em 1em 4em / 0.5em 3em;Еквівалентний:
автор: Svitlanaborder-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
Синтаксис
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;Властивість border-radius може отримувати 4 значень:
-
length -
Визначає форму кутів. Значення без задання дорівнює 0
автор: Svitlana -
% -
Визначає форму кутів у % відносно ширини блоку
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderRadius="25px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 4 | 4 | 5 | 10.5 | 12 | 9 | |
| відсотки | 4.0 | 4.0 | 5.0 | 10.5 | 9.0 | |
| еліптичні куточки | 1.0 | 3.5 | 3.0 | 10.5 | 9.0 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| ≤4.4 | 18 | 4 | 4.2 | |
| відсотки | 2.1 | 4.0 | 5.0 | |
| еліптичні куточки | 2.1 | 3.5 | 3.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Інструмент
Заокруглює кути повзунками, зокрема еліптично.
Генератор border-radius — окремою сторінкою, з поясненням пасток.
Одне значення border-radius заокруглює всі чотири кути однаково.
HTML
<div>Усі чотири кути заокруглені на 25 пікселів.</div>CSS
div {
border: 2px solid;
border-radius: 25px;
padding: 12px;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-radius</strong>.</p>
<p>Вона встановлює, ступінь заокруглення кутів кордону елемента. В цьому прикладі, Ви можете визначити цей ступінь, для кожного з кутів окремо (в такому порядку: верхній лівий кут, верхній правий, нижній правий, нижній лівий).</p>
<strong>border-radius: </strong>
<input type="number" class="input" id="num1" value="24" min="0">px
<input type="number" class="input" id="num2" value="24" min="0">px
<input type="number" class="input" id="num3" value="24" min="0">px
<input type="number" class="input" id="num4" value="24" min="0">px
<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: 24px solid #444;
border-radius: 24px;
}
.input {
margin-bottom: 36px;
width: 75px;
}
#select {
position: relative;
top: -4px;
width: 100px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var num1 = document.querySelector('#num1').value;
var num2 = document.querySelector('#num2').value;
var num3 = document.querySelector('#num3').value;
var num4 = document.querySelector('#num4').value;
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-radius', num1 + 'px ' + num2 + 'px ' + num3 + 'px ' + num4 + 'px'));
}));Демонстрація роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>border-radius</code> ми можемо заокруглити кути для кордону елемента.</p>
<p>Кордон першого блоку не має заокруглених кутів, два інші вже мають: <em>24px</em> i <em>12px 16px 0px 50px</em> відовідно.</p>
</div>
<div class="wrapper">
<div class="block"></div>
<div class="block one"></div>
<div class="block two"></div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 17px;
line-height: 1.45;
}
.info {
padding: 4px 16px 8px 16px;
}
em {
font-weight: 700;
}
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;
border: 16px solid #666;
}
.block.one {
border-radius: 24px;
}
.block.two {
border-radius: 12px 16px 0px 50px;
}Скруглена картка з кольоровою шапкою: без overflow: hidden кути дитини стирчать за радіус.
HTML
<div class="card">
<div class="head">Без overflow: hidden</div>
<p>Кути шапки квадратні й перекривають округлення картки.</p>
</div>
<div class="card cut">
<div class="head">З overflow: hidden</div>
<p>Шапка обрізана рівно по радіусу картки.</p>
</div>CSS
.card {
width: 260px;
margin-bottom: 16px;
border: 2px solid #2b6cb0;
border-radius: 18px;
background: #f4f7fb;
}
.cut {
overflow: hidden;
}
.head {
padding: 10px;
background: #2b6cb0;
color: #fff;
}
.card p {
padding: 0 10px 10px;
}Демонстрація роботи властивості
HTML
<div class="block block-1">
<code>border-radius: 16px;</code>
</div>
<div class="block block-2">
<code>border-radius: 4px 25px;</code>
</div>
<div class="block block-3">
<code>border-radius: 16px 0 50px 80%;</code>
</div>
<div class="block block-4">
<code>border-radius: 12px / 40px;</code>
</div>
<div class="block block-5">
<code>border-radius: 16px 10px 4px 50px / 50px 16px 4px 20%;</code>
</div>CSS
.block {
width: 450px;
height: 150px;
background-color: #ccc;
border: 2px solid #666;
margin-bottom: 16px;
line-height: 146px;
box-sizing: border-box;
text-align: center;
font-family: monospace;
color: #222;
font-size: 13px;
}
.block-1 {
border-radius: 16px;
}
.block-2 {
border-radius: 4px 25px;
}
.block-3 {
border-radius: 16px 0 50px 80%;
}
.block-4 {
border-radius: 12px / 40px;
}
.block-5 {
border-radius: 16px 10px 4px 50px / 50px 16px 4px 20%;
}Приклад використання властивості
HTML
<div class="block">
<code>border-radius: 0 36px;</code>
</div>CSS
.block {
border: 4px solid #666;
width: 250px;
height: 250px;
text-align: center;
padding-top: 105px;
box-sizing: border-box;
border-radius: 0 36px;
}Коментарі
Коментарів ще немає — будьте першим!