Свойство border-radius

Последнее обновление: 04.05.2011

Свойство 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
Поддерживается браузерами
  • Internet Explorer 9 и выше
  • Firefox 4 и выше
  • Opera 10.5 и выше
  • Safari 5 и выше
  • Chrome 5 и выше

Пример

.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 отсутствует возможность указать разные значения радиуса для разных углов. Для этого приходится для каждого угла указывать радиус отдельно.

По теме

Показать комментарии