Кроссбраузерное скругление углов средствами CSS

Базовый CSS но без поддержки IE

-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
-khtml-border-radius: 12px; /* old Konqueror browsers */ 
border-radius: 12px; /* Opera 10.5+, IE 9 */

В общем это то же самое, что предлагает вот этот гламурненький сайт border-radius.com. К сожалению, этот способ работает только в вакуумных условиях, — в суровой реальности с вечно живым ИЕ, всё не так просто. А разве кто-то сомневался? Но по крайней мере можно определиться с радиусом скругления.

А вот этот генератор закругленных углов на CSS3 (aimweb.name/border/) уже выглядит несколько серьезнее. Кроме визуального представления еще даются рецепты от головной боли, причиняемой Интернет Эксплорером. Для поддержки скругленных углов в IE, следует использовать Vml-скрипт (//fetchak.com/ie-css3/), подключаемый в CSS.

Ниже приведен код CSS, сгенерированный этим сервисом.

Кроссбраузерный CSS для IE

border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
background: #efefef url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSIjZWZlZmVmIiByeD0iMTIiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=);
behavior: url(ie-css3.htc); /* Это пилюля для IE */

Если файл ie-css3.htc находится в корне сайта, то в скобках будет указано только его название. Если он лежит в другом месте, например в папке /css/, то соответственно это нужно указать. С этим, думаю, все ясно.

behavior: url(/css/ie-css3.htc);

Скачать ie-css3.htc:

ie-css3.htc

Вот здесь очень навороченный способ скругления углов (//web-standards.ru/articles/cross-browser-rounded-corners/), о котором подробно написал Лев Солнцев. Если есть время, можете почитать для общего образования. Но, в принципе, того что здесь написано вполне достаточно, чтобы быстро и эффективно реализовать скругленные углы без дополнительных изображений, одними лишь средствами CSS!


Понравилась статья? Поделиться с друзьями:
Комментариев: 17
  1. Левап

    У вас код вылазит за контейнер и у меня IE не скругляет применяя этот метод

    1. FORTRESS-DESIGN (автор)

      Код вылазит, да. Там ведь какая длинная строка? А на счет ИЕ — не знаю, проверьте все, у меня ведь заработало.

  2. Вячеслав

    У меня получилось закруглить, на счет IE вроде проверял только на 9. все работает.

    1. FORTRESS-DESIGN (автор)

      Ну вот, правильно. Все ведь дело в пилиле под названием «ie-css3.htc».

      1. Вячеслав

        Пробовал без «ie-css3.htc» тож вроде нормально смотрится… просто людишки бы по быстрее со старых браузеров слизали и ставили нормальные =)

        1. FORTRESS-DESIGN (автор)

          В этом-то вся проблема. Многие пользователи даже не догадываются, что кроме ИЕ, существуют другие браузеры.

  3. Павел

    Большинство людей покупают компы, и как правило там уже есть поганый ie кому он вообще нужен, тормозит сайты уродует. Вообщем не браузер а мучение сплошное создателям его руки отбить…. Google огонь думаю он скоро займёт весь рынок, как ловко он обогнал старичка Opera хотя я и Opera уважаю тоже всё гармонично работает.

    1. FORTRESS-DESIGN (автор)

      Да, Билл Гейтс в свое время захватил весь мир своей Виндоус со браузером в нагрузку.

  4. Михаил

    В ie7 и ie8 не работает, смысла от этой штуке нет, так как ie9 и так поддерживает css3

    1. FORTRESS-DESIGN (автор)

      В 9 ИЕ, честно говоря не пробовал, но в 8 была проблема, пок ане сделал так как написанов посте.

  5. Анна

    Ребят вы чего? Всё распрекрасно работает в IE 6,7,8,9. Глянула для интереса IE 5.5. — браузер отрисовывает одновременно два вида уголков: cкруглённые и прямоугольные. Автору моя благодарность. ;)

    1. FORTRESS-DESIGN (автор)

      Спасибо, Анна за то, что проверили код и поделились с нами полученными результатами.

  6. Андрей

    Автору спасибо за статью!
    Жаль что все-равно не избежать этого геморроя с разными браузерами и их отображением css..

  7. Амир

    вроде пашет, но кнопка, если ее вставлять в окно wordpress и прописывать свойства в головном css, улетает незнамо куда

    1. FORTRESS-DESIGN (автор)

      Важно не где прописано, а что написно. Улетает проверьте в каком контейнере находится элемент.

  8. coolteams

    Статья ни о чем, бесполезный перепост бесполезного поста. В IE7,8 ничего этим методом не закругляет, а в IE9,10 оно итак работает, и без этих плясок с бубном. Вопрос- в каком браузере автор хотел закруглить углы, в котором css3 поддерживается? К чему тогда весь этот бред?

    1. FORTRESS-DESIGN (автор)

      Статья написана 1 сентября 2012 года, какой тогда был ИЕ я уже не помню. Но причина появления этой статьи в моем блоге проста. Я написал то, что в свое время это способ помог мне в решении проблемы скругления углов.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Перейти к верхней панели
Adblock detector