Тег з прикладом
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.5+ | 3.0+ | 1.0+ | 2.1+ | 1.0+ |
Кратка інформація
| Значення за замовчуванням | 0 |
|---|---|
| Наслідується | Ні |
| Процентна запис | Так, відносно ширини блока |
| Застосовується | До всіх елементів, крім таблиць з border-collapse: collapse |
| Посилання на специфікацію | http://www.w3.org/TR/css3-background/#the-border-radius |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Встановлює радіус закруглення кутиків рамки. Якщо рамка не задана, то закруглення також відбувається і з фоном.
Синтаксис
border-radius: <радіус>{1,4} [ / <радіус>{1,4}]
Значення
Дозволяється використовувати одне, два, три або чотири значення, перераховуючи їх через пробіл. Також можна вказувати два значення через слеш (/). У якості значень вказуються числа у будь-якому допустимому форматі для CSS. У випадку використання відсотків, відлік ведеться відносно ширини блока.
| Кількість значень | Результат |
|---|---|
| 1 | Радіус вказується для всіх чотирьох кутів. |
| 2 | Перше значення задає радіус верхнього лівого і нижнього правого кутка, друге значення — верхнього правого і нижнього лівого кутка. |
| 3 | Перше значення задає радіус для верхнього лівого кутка, друге — одночасно для верхнього правого і нижнього лівого, а третє — для нижнього правого кутка. |
| 4 | По черзі встановлює радіус для верхнього лівого, верхнього правого, нижнього правого і нижнього лівого кутка. |
У випадку задання двох параметрів через слеш, перший вказує радіус по горизонталі, а другий по вертикалі (еліптичні кути).
В браузерах Chrome до версії 4.0, Safari до версії 5.0, iOS використовується нестандартна властивість -webkit-border-radius.
Firefox до версії 4.0 використовує нестандартну властивість -moz-border-radius.