Базовый 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!
У вас код вылазит за контейнер и у меня IE не скругляет применяя этот метод
Код вылазит, да. Там ведь какая длинная строка? А на счет ИЕ — не знаю, проверьте все, у меня ведь заработало.
У меня получилось закруглить, на счет IE вроде проверял только на 9. все работает.
Ну вот, правильно. Все ведь дело в пилиле под названием «ie-css3.htc».
Пробовал без «ie-css3.htc» тож вроде нормально смотрится… просто людишки бы по быстрее со старых браузеров слизали и ставили нормальные =)
В этом-то вся проблема. Многие пользователи даже не догадываются, что кроме ИЕ, существуют другие браузеры.
Большинство людей покупают компы, и как правило там уже есть поганый ie кому он вообще нужен, тормозит сайты уродует. Вообщем не браузер а мучение сплошное создателям его руки отбить…. Google огонь думаю он скоро займёт весь рынок, как ловко он обогнал старичка Opera хотя я и Opera уважаю тоже всё гармонично работает.
Да, Билл Гейтс в свое время захватил весь мир своей Виндоус со браузером в нагрузку.
В ie7 и ie8 не работает, смысла от этой штуке нет, так как ie9 и так поддерживает css3
В 9 ИЕ, честно говоря не пробовал, но в 8 была проблема, пок ане сделал так как написанов посте.
Ребят вы чего? Всё распрекрасно работает в IE 6,7,8,9. Глянула для интереса IE 5.5. — браузер отрисовывает одновременно два вида уголков: cкруглённые и прямоугольные. Автору моя благодарность.
Спасибо, Анна за то, что проверили код и поделились с нами полученными результатами.
Автору спасибо за статью!
Жаль что все-равно не избежать этого геморроя с разными браузерами и их отображением css..
вроде пашет, но кнопка, если ее вставлять в окно wordpress и прописывать свойства в головном css, улетает незнамо куда
Важно не где прописано, а что написно. Улетает проверьте в каком контейнере находится элемент.
Статья ни о чем, бесполезный перепост бесполезного поста. В IE7,8 ничего этим методом не закругляет, а в IE9,10 оно итак работает, и без этих плясок с бубном. Вопрос- в каком браузере автор хотел закруглить углы, в котором css3 поддерживается? К чему тогда весь этот бред?
Статья написана 1 сентября 2012 года, какой тогда был ИЕ я уже не помню. Но причина появления этой статьи в моем блоге проста. Я написал то, что в свое время это способ помог мне в решении проблемы скругления углов.