border-radius

Оновлено: 15.12.2022

border-radius

Встановлює радіус заокруглення куточків рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

Коротка інформація

Значення за замовчуванням 0
Успадковується Ні
Застосовується До всіх елементів, за винятком таблиць із border-collapse: collapse
Анімується Так

Синтаксис

border-radius: <радіус>{1,4} [ / <радіус>{1,4}]

Значення

Дозволяється використовувати одне, два, три або чотири значення, перераховуючи їх через пробіл (табл. 1). Також допустимо писати два значення через косу риску (/). Як значення вказуються числа в будь-якому допустимому для CSS форматі. У разі застосування відсотків, відлік ведеться відносно ширини блоку.

Табл. 1. Зависимость от числа значений

Число значеньРезультат
1Радіус вказується для всіх чотирьох куточків.
2Перше значення задає радіус верхнього лівого і нижнього правого куточків, друге значення - верхнього правого і нижнього лівого куточків.
3Перше значення встановлює радіус для верхнього лівого куточка, друге - одночасно для верхнього правого і нижнього лівого куточків, а третє - для нижнього правого куточка.
4По черзі встановлює радіус для верхнього лівого, верхнього правого, нижнього правого і нижнього лівого куточків.

У разі завдання двох параметрів через косу риску, то перший параметр задає радіус по горизонталі, а другий по вертикалі (еліптичні куточки). На рис. 1 показано різницю між звичайним заокругленим куточком і еліптичним куточком.

Рис. 1. Радіус заокруглення для створення різних типів куточків

Приклад

Об'єктна модель

Об'єкт.style.borderRadius

Примітка

Chrome до версії 4.0, Safari до версії 5.0 і Android до версії 2.1 використовують властивість -webkit-border-radius.

Firefox до версії 4.0 використовує властивість -moz-border-radius.

Браузери

border-radius

Переглянути сумісність з Can I use?

border-radius