Свойство -moz-border-radius — сокращенный способ задать свойства границы -moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomright, -moz-border-radius-bottomleft позволяет задать одновременно радиус скруглений всех углов элемента.
Допустимые значения
- — точное значение радиуса (не может быть отрицательным)
- — значение радиуса в процентах.
Есть возможность задать несколько радиусов для разных углов. Если задано два радиуса, первый означает радиус скругления левого верхнего и правого нижнего углов, а второй — правого верхнего и левого нижнего углов. Если задано три числа, тогда первое — левый верхний угол, второе — правый верхний и левый нижний углы, а третье — правый нижний угол.
Можно задать эллиптические радиусы используя слеш (поддерживается Firefox 3.5 и выше). Значение до слеша — радиусы по оси х, а после слеша — радиусы по оси у.
Если значения указаны в процентах, то значение радиуса по обоим осям отсчитывается в процентах от ширины блока (тогда как в спецификации значения по оси x — от ширины, а по оси y — от высоты блока).
| Значение по умолчанию | 0 |
|---|---|
| Применимо | ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’. |
| Наследование | нет |
| Поддерживается браузерами |
|
Пример
.block {
-moz-border-radius: 10px 5px 3px 20px / 20% 10% 5px 3px;
border: 1px solid #000;
}
Заметки
В спецификации CSS3 есть аналогичное свойство border-radius.
По теме
- Вендорные префиксы. Что это?
- Скругление углов. Обзор методов
- -moz-box-shadow и -moz-border-radius – это кошмар CPU
- Проблемы с border-radius
- CSS свойство -webkit-border-radius
- CSS свойство border-top-right-radius
- CSS свойство border-top-left-radius
- CSS свойство border-bottom-left-radius
- CSS свойство border-bottom-right-radius