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}]
Значення
Дозволяється використовувати одне, два, три або чотири значення, перераховуючи їх через пробіл (табл. 1). Також допустимо писати два значення через слеш (/). Як значення вказуються числа в будь-якому допустимому для CSS форматі. У разі застосування відсотків, відлік ведеться щодо ширини блоку.
Число значень | Результат |
---|---|
1 | Радіус вказується для всіх чотирьох куточків. |
2 | Перше значення задає радіус верхнього лівого і нижнього правого куточка, друге значення - верхнього правого і нижнього лівого кутка. |
3 | Перше значення задає радіус для верхнього лівого кутка, друге - одночасно для верхнього правого і нижнього лівого, а третє - для нижнього правого куточка. |
4 | За про еред встановлює радіус для верхнього лівого, верхнього правого, нижнього правого і нижнього лівого кутка. |
В разі завдання двох параметрів через слеш, то перший задає радіус по горизонталі, а другий по вертикалі (еліптичні куточки). На рис. 1 показана різниця між звичайним округленим куточком і еліптичних куточком.
Приклад
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> border-radius </title> <style> .radius {background: #f0f0f0; /* Колір фону */ border: 1px solid black; /* Параметри рамки */ padding: 15px; /* Поля навколо тексту */ margin-bottom: 10px; /* Відступ знизу */ } </style> </head> <body> <div style="border-radius: 50px 0 0 50px;" class="radius"> border-radius: 50px 0 0 50px; </div> <div style="border-radius: 40px 10px" class="radius"> border-radius: 40px 10px; </div> <div style="border-radius: 10em /1em;" class="radius"> border-radius: 13em /3em; </div> <div style="border-radius: 13em 0.5em /1em 0.5em;" class="radius"> border-radius: 13em 0.5em /1em 0.5em; </div> <div style="border-radius: 8px;" class="radius"> border-radius: 8px; </div> </body> </html>
Результат даного прикладу показаний на рис. 2.
Браузери
Chrome до версії 4.0, Safari до версії 5.0, iOS використовують нестандартне властивість - webkit-border-radius .
Firefox до версії 4.0 використовує нестандартне властивість - moz-border-radius .