-webkit-border-radius

Свойство -webkit-border-radius — сокращенный способ задать свойства границы -webkit-border-top-right-radius, -webkit-border-bottom-right-radius, -webkit-border-bottom-left-radius, -webkit-border-top-left-radius, позволяет задать одновременно радиус скруглений всех углов элемента.

Допустимые значения

  • <значение> — точное значение радиуса (не может быть отрицательным)

Есть возможность задать эллиптические радиусы используя пробел. Значение до пробела — радиус по оси х, а после пробела — радиус по оси у.

Значение по умолчанию 0
Применимо ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’.
Наследование нет
Поддерживается браузерами
  • Safari 3 и выше
  • Chrome 1.0 и выше

Пример

CSS
.block {
width:100px;
height:50px;
-webkit-border-radius: 10px 20px;
border: 1px solid #000;
}

Заметки

Это свойство отличается от CSS3 свойства border-radius тем, что не поддерживает процентных значений радиуса и задает одно значение радиуса для всех углов элемента. Чтобы задать разные значения радиуса для разных углов, для каждого угла нужно указывать радиус отдельно с помощью полных свойств.

По теме