-moz-border-radius

Свойство -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’.
Наследование нет
Поддерживается браузерами
  • Firefox 1.0 и выше

Пример

CSS
.block {
-moz-border-radius: 10px 5px 3px 20px / 20% 10% 5px 3px;
border: 1px solid #000;
}

Заметки

В спецификации CSS3 есть аналогичное свойство border-radius.

По теме