CSS3 свойство border-radius

Скругление углов с помощью CSS3

Для скругления углов в CSS3 используется свойство border-radius.

Браузеры Google Chrome и Safari «понимают» его как с префиксом -webkit так и без оного. Mozilla Firefox понимает это свойство только с префиксом -moz. А Opera и Internet Explorer не понимают его ни под каким видом.

Каноническое задание: border-radius: размер, где:

• размер – размер в допустимых единицах CSS

.radius1 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

Скругление определенных углов

С помощью свойства CSS3 border-radius можно задавать размер скругления отдельных узлов.

Исправлено: Порядок задания размеров последней спецификации border-radius.

border-radius: top-left top-right bottom-right bottom-left

Порядок задания размеров запомнить проще так:

1 2
4 3

.radius2 {
  -webkit-border-radius: 0 10px 0 10px;
  -moz-border-radius: 0 10px 0 10px;
}

Отдельные правила скругления углов

Можно использовать отдельные правила для скругления каждого угла.

Каноническое задание: border-top-left-radius: размер, где:

• top – это top | bottom


• left – это left | right


• размер – размер в допустимых единицах CSS

Тут неприятно удивил браузер Firefox, так как синтаксис у него отличается от «канонического»:
-moz-border-radius-topleft: размер.

.radius3 {
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomleft: 10px;
}

Успехов в «украшательстве» веб-страниц! И… пользуйся продвинутыми браузерами ;)

Еще по теме CSS

В этой статье я рассказывал про свойство box-shadow.

HTML скругление углов

Скругление углов с помощью CSS