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

Февраль, 08th 2011Рубрика: Web-мастеринг 15425
Подписаться на комментарии по RSS

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

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

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

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

Скругление углов средствами CSS3. В данном примере не используется JS или картинки.

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

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

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

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

border-radius:0 20px;
border-radius:25px 0 10px 0;

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

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

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

<img class="img-radius" src="/uploads/testimg.jpg" />

CSS код:

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

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

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

<div class="img-radius" style="background:url(/uploads/testimg.jpg); width:250px; height:162px"><div>

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

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

<div class="img-radius" style="background:url(/uploads/testimg.jpg)"><img src="/uploads/testimg.jpg" /><div>

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);
}

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Комментариев: 4

  1. 2012-05-27 в 22:15:05 | Артём
    border:border:2px solid #222;

    Ошибка.

  2. 2012-05-28 в 10:52:28 | dre@mer]]>avatar]]>

    Спасибо, опечатался, уже поправил

  3. 2012-06-10 в 21:31:12 | Москва

    Радиусы у EI9 - работают.

  4. 2012-10-16 в 20:33:33 | Sirius

    Скругление на IE не работало, поменял behavior: url(css/PIE.htc); на behavior: url(css/PIE.php); заработало, странно :)

comments powered by HyperComments
Без регистрации
ваш комментарий будет опубликован после проверки
Регистрация на сайте

На указанный адрес будет отправлено письмо с кодом активации. Вы можете настроить собственный профиль и стать активным участником или автором.