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.
| Нотатка: | Запис: Еквівалентний: |
Синтаксис
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;Властивість border-radius може отримувати 4 значення:
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderRadius="25px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| базовий синтаксис | 4.0 |
9.0 |
4.0 |
5.0 |
10.5 |
| відсотки | 4.0 |
9.0 |
4.0 |
5.0 |
10.5 |
| еліптичні куточки | 1.0 |
9.0 |
3.5 |
3.0 |
10.5 |
| Переглядач | |||
|---|---|---|---|
| базовий синтаксис | 2.1 |
4.0 |
5.0 |
| відсотки | 2.1 |
4.0 |
5.0 |
| еліптичні куточки | 2.1 |
3.5 |
3.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Встановлення округлення кутів для елементу
div {
border: 2px solid;
border-radius: 25px;
}