CSS властивість border-radius, призначення, допустимі значення, приклади
Властивість border-radius — скорочений спосіб задати властивості межі border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius дозволяє задати одночасно радіус округлень всіх кутів елемента.
Допустимі значення
- - Точне значення радіуса (не може бути негативним)
- - Значення радіусу у відсотках.
Є можливість встановити кілька радіусів для різних кутів. Якщо задано два радіуси, перший означає радіус заокруглення лівого верхнього та правого нижнього кутів, а другий – правого верхнього та лівого нижнього кутів. Якщо встановлено три числа, тоді перше — лівий верхній кут, друге — правий верхній і лівий нижній кути, а третє — правий нижній кут.
Можна встановити еліптичні радіуси використовуючи сліш. Значення до сліша - радіуси по осі х, а після слєша - радіуси по осі у.
| еліптичні радіуси |
Якщо значення вказані у відсотках, то значення радіусу по осі х відраховується у відсотках від ширини блоку, а значення радіусу по осі — від висоти блоку.
| 0 |
| до всіх елементів, крім табличних елементів котрим властивість border-collapse має значення ‘collapse’. |
| ні |
| CSS 3 |
|
Safari 3-5 і Chrome 1-5 підтримують подібну властивість -webkit-border-radius, а Firefox 1.0-4.0 -moz-border-radius, але ці властивості не повністю відповідають специфікації. Узокрема, -webkit-border-radius не підтримує значення радіусів, задані у відсотках, а -moz-border-radius розраховує радіус по осі y у відсотках від ширини блоку, а не від висоти, як у специфікації. Можливість задати еліптичні радіуси через пропуск підтримується в Safari 3 і Chrome 1 і вище і Firefox 3.5 і вище. Також у властивості -webkit-border-radius відсутня можливість вказати різні значення радіусу для різних кутів. Для цього доводиться для кожного кута вказувати радіус окремо.