css властивість border-radius

Властивість 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.

автор: Svitlana

Нотатка

Запис:

border-radius: 2em 1em 4em / 0.5em 3em;

Еквівалентний:

border-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;

автор: Svitlana

Синтаксис

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.0	4.0	5.0	10.5	9.0
відсотки	4.0	4.0	5.0	10.5	9.0
еліптичні куточки	1.0	3.5	3.0	10.5	9.0

Підтримка: мобільні переглядачі
Переглядач
базовий синтаксис	2.1	4.0	5.0
відсотки	2.1	4.0	5.0
еліптичні куточки	2.1	3.5	3.0

Приклади

+ запропонувати свій приклад у пісочниці

Одне значення border-radius заокруглює всі чотири кути однаково.

HTML

<div>Усі чотири кути заокруглені на 25 пікселів.</div>

CSS

div {
    border: 2px solid;
    border-radius: 25px;
    padding: 12px;
}

автор: Svitlana

Динамічний приклад

автор: Svitlana

Демонстрація роботи властивості

автор: Svitlana

Демонстрація роботи властивості

автор: Svitlana

Приклад використання властивості

автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!