Свойство 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 | CSS 3 |
| Поддерживается браузерами |
|
Пример
.block {
border-radius: 10px/20%;
border: 1px solid #000;
}
Твой код:
Результат:
большой полигон
Заметки
Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.
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 отсутствует возможность указать разные значения радиуса для разных углов. Для этого приходится для каждого угла указывать радиус отдельно.
По теме
- Скругление углов. Обзор методов
- Проблемы с border-radius
- -moz-box-shadow и -moz-border-radius – это кошмар CPU
- CSS свойство border-top-right-radius
- CSS свойство border-top-left-radius
- CSS свойство border-bottom-left-radius
- CSS свойство border-bottom-right-radius