Скругление углов CSS3

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

Backgrounds and Borders module на данный момент всё ещё остается черновым документом W3C, поэтому при именовании свойства border-radius браузеры используют вендорные префиксы:

• -moz- используется в браузерах на основе движка Gecko (Firefox и SeaMonkey)
• -webkit- в браузерах на основе одноименного движка (Safari и Chrome)

Браузер Opera обходится без вендорного префикса, ну а IE, оправдывая своё народное название "осла", вовсе не поддерживает данного свойства.

Для скругления углов, как в примере выше, элементу div были назначены следующие свойства: ширина бордюра 5 пикселей, радиус скругления углов 20 пикселей. Причем для правильного отображения в разных браузерах были добавлены вендорные префиксы.

border:5px solid #545751;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;

В этом примере свойство border-radius используется в простейшей форме, закругляя все четыре угла блока с одинаковым радиусом. Можно задать каждому углу свой радиус скругления, перечисляя значения начиная сверху и по часовой стрелке.

При указании двух или трех значений, пропущенные значения берутся из противоположных углов (top, right, bottom, left). Следующие примеры буду писать без вендорных префиксов, собственно подставить их не трудно.

C этим, полагаю разобрались, ничего сложного тут нет. Более интересная задача - скругление углов у изображений.

Задача интересна прежде всего тем, что нужно добиться скругления углов у изображения ещё и с определенной рамкой, не зависимо от фона и размеров картинки, и возможностью задавать радиус скругления. На первый взгляд задача не выполнимая.

Берем любую картинку и пробуем в лоб применить к ней свойство border-radius.

CSS код:

.img-radius {
  border:2px solid #222;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
}

Получили явно не то, что ожидали, бордюр со скруглением есть, а вот картинка как была, так и осталась...

Решение довольно простое - предлагаю использовать картинку в качестве фона элемента div.

Вот теперь получили желаемый результат - скругление работает. Смущает один момент, а именно необходимость вручную указывать размеры картинки.

Чтобы этого не делать, вставим внутрь нашего блока <div> ту же картинку с указанием ей свойства visibility:hidden, т.е. сделаем её невидимой. В результате картинка будет распирать содержащий её контейнер и сама задаст необходимые размеры нашему блоку с бэкграундом.

CSS код:

.img-radius {
  border:border:2px solid #222;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
}
.img-radius img {
  display: block;
  visibility: hidden;
}

И напоследок про костыли для IE. Даже это тупое животное можно научить закруглению углов, но тут не обойтись без сторонней библиотеки CSS3 Pie. Данная библиотека реализует многие CSS3 свойства в IE6-8, в том числе и border-radius (кстати, весит всего 28Кб). Для её подключения потребуется в CSS классу .img-radius добавить строчку:

.img-radius {
  ...
  behavior: url(css/PIE.htc);
}