Border-radius кроссбраузерно

На данный момент свойство CSS3 border-radius не поддерживается в полной мере браузерами IE 6,7,8 и Opera 9.64
(upd. В IE9 есть поддержка border-radius)

В файле стилей пишем следующее:

.sample{
-moz-border-radius: 15px; /*для Firefox */
-webkit-border-radius: 15px; /* Safari и Chrome */
border-radius: 15px; /* Opera 10.5+, а также версии других браузеров в будущем */
behavior: url(ie-css3.htc); /* Поддержка IE 6,7,8. */
}

Примечание №1
VML-скрипт ie-css3.htc берем с http://fetchak.com/ie-css3/

Примечание №2
Opera 9.64 отображает скругленные углы через SVG, поэтому
для поддержки border-radius в Opera 9.64 стоит использовать генератор скругленных углов.

Пример кроссбраузерного варианта border-radius с учетом всех браузеров:

.box{
position:relative; z-index:1; /*IE*/
background-color: #AAA;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #AAA url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSIjQUFBIiByeD0iMTUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=);
behavior: url(ie-css3.htc);
}
<div class="box"></div>

Border-radius кроссбраузерно: 10 комментариев

  1. у меня не получается сделать!в интренет эксплорере всё равно такая же фигня

    1. Причин может быть несколько:
      Неправильный путь до .htc файла в CSS
      Если установлен Multiple IE, возможны проблемы с отображением на локальной машине (при публикации на сервере подобных проблем не замечал)

  2. У меня гребаный IE 9 нихрена не поддерживает border-radius. Еще раз убеждаюсь в тупости разработчиков этого говняного браузера.

  3. Данный скрипт работает, но к сожалению какой то глюк имеет!

    Если у блока к которому применен border-radius поставить фоновое изображение типа спрайт и указать background-position, то позиция фона не меняеться!! Позиция фона остаеться на координатах 0 0 :( — жаль, очень жаль.

  4. css3 существует для того, чтобы облегчать задачу оформления страницы. Когда он не поддерживался вовсе, такая задача выполнялась путем одной картинки png. например 2000*2000px и показом разных скругленных углов в области блока. лично я и сейчас продолжаю пользоваться старыми дедовскими способами. сейчас — это лучший вариант. только лет через несколько мы сможем перейти на полную поддержку css3

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *