Кроссбраузерный border-radius
7 января 2010
Одной из самых больных тем верстальщиков являются скругление уголков. В последнее время ситуация улучшается и браузеры потихоньку начинают поддерживать столь востребованные CSS-свойства. FF, Safari, Chrome делают это через свойства с своими особыми префиксами, Opera — скоро будет делать без префиксов. В стороне у нас стоит, как всегда, IE.
К счастью, IE можно довольно красиво победить его же средствами. Одно из понравившихся мне решений, использующее VML и behaviour — curved-corner. Для использования сливаем border-radius.htc, складываем рядом с CSS и используем следующий код:
.my-block { /* Для хороших браузеров */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ -khtml-border-radius: 10px; /* KHTML */ border-radius: 10px; /* CSS3 */ /* Для плохих IE */ behavior: url(border-radius.htc); /* учим IE border-radius */ }
Да, кстати, по соседству можно найти менее востребованный, но всё же полезный behaviour для box-shadow.
Комментарии RSS по email OK
border-radius.htc: line #60
Вау! Без IE работа JavaScript-программиста не была бы настолько интересной :D Вот что за новый тип данных unknown в JScript!? Погуглив, нашел еще упоминания о типе unknown, значит это скорее всего не ошибка в border-radius.htc и как-то связано с VML-элементами, потому что для обычных узлов parentElement выдает null, в случае отсутствия родительского элемента.
Спасибо, вовремя, но в принципе и без хака идеология отдавать ие блоки без закруглённых краёв во мне уже есть, главное не белый текст на белом фоне.
Просто супер! Я и не думал, что такое возможно. К тому же в IE углы выглядят идеально, без каких-либо артефактов. Спасибо за информацию!
А вот у меня работает только в FF и Chrome. Причем в последнем углы весьма побитые.
Хорошая вещь! Жаль, что некорректно работает с определениями радиусов типа "0 10px 10px 0", а то замены ему не было бы!
А как же Опера? Даже 10ка не поддерживает border-radius.
Opera скоро подтянется. Уже сейчас можно поставить вполне сносную тестовую версию, которая это умеет.
Есть еще такое решение - http://code.google.com/p/rocon/
Демо - http://chikuyonok.ru/playground/rocon/
О rocon знаю. У меня он себя плохо повёл, но вообще очень неплохое решение.
В rocon есть свои нюансы, у меня например перестал margin между блоками работать, в ie у блоков с скругленными углами, а вообще вещь интересная.
В Opera начиная с 10.50 будет свойство для скругления углов.
а я как-то
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
за кошерный способ не считаю. перебор свойств под каждый браузер — не моя мечта (:
rocon неплох, хотя бывает капризным с IE ((( всё жду от автора обновление до 2.0
стоит на каком-то проекте поганять этот .htc, спасибо!
спасибо за наводку. Однако, все-таки пока нет "нормального" решения (пользователи IE все же видят границы с уголками), наверное, лучше "по старинке" )
ссылки в правом меню на этом сайте тоже сначала "угловатые", через долю секунды - скругляются :)
Очень интересное решение, но у меня не получается. У мня на сайте использовал этот хак, на странице "Обо мне", блок описания во всех арбузах со скругленными углами, в ИЕ7 углы как были так и остались. Файл (border-radius.htc) закинул в корень сайта.
CSS: .rounded10 { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -khtml-border-radius:10px; behavior: url(border-radius.htc); }
Попробуйте закинуть в
/skin/alex/
.была такая же тема, пока не объяснили что границу все же придется объявить добавь border: 1px solid #[цвет фона блока];
**Гость 20.10.2010 20:05:03
была такая же тема, пока не объяснили что границу все же придется объявить добавь border: 1px solid #[цвет фона блока];**
У меня указана граница.
Sam, там тоже есть border-radius.htc, но проблема осталась почему та. Пока никак не победил эту каку...
Такая же проблема, все выше сказаное выполнил, а рамка не закруглилась.
не работает в восьмом ишаке файл border-radius.htc лежит в той же папке, где и html, из которого я привел цитату выше.
Если border-radius.htc применяется к блоку со свойством display:none, то вылезает js-ошибка (((
Sam, отличная статья. Спасибо. Кстати в google.com по запросу border-radius в IE 2 место. P.S. Это Romantic из форума SamLab
у меня не работает, подскажите, пожалуйста, что еще надо сделать, кроме того, как скачать border-radius.htc положить его в папку с css, в самом css описать класс my-block и задать диву рамку?
Ещё нужно behavior подключить:
Ну вот, вроде сейчас заработало, ie 7 закругляет углы, но с какими то косяками
behavior: url(border-radius.htc); /* учим IE border-radius */
Ну да, я скопировала целиком класс my-block
border-radius.htc
лежит в той же папке, что и CSS?behavior: url(border-radius.htc); - это не работает, если есть фоновые картинки; как это можно исправить?
Использовать другое решение. Вроде там была поддержка.
Sam, пирожок мне нравится больше, попробую это другое решение. А с бордер-радиусом.htc уже намучился...
похоже не канает для ie, когда указаны разные радиусы углов. например, 5px 5px 0 0 - ie делает все углы одинаково закругленными
Работает, единственное нужно разобраться с путем,пришлось бросить в корневую папку сайта,результат просмотреть можно только на реальном сервере(а не на денвере).
Мой опыт — файлик нужно бросать не в папку со стилями, а в папку, где html-код нахдится. Лучше, чтобы стили были в хедере.
Алексей, у мня всё
PHP
выводит. Попросту нету
HTML
страниц, тока скрипты
Здравствуйте, как бы разобраться с тем что если блок резиновый то в ИЕ он не тянется или не уменьшается или тока у меня так? в ФФ, хорм всё гуд.
О! у меня получилось с закруглеными!!
"2. Случаем не локальный файлик? Если да — не заработает без шаманства с настройками IE."
а если локальный, какие настройки надо изменить?подскажи пожалуйста
Возрадуйтесь! http://css3pie.com/
C IE вечно одни проблемы! Благо уже научились бороться и подстраиваться под них.
А у меня, например, за hover не работает
работает, а
не работает
Блин, спасибо за пост, всегда забываю как для всех браузеров это делается!
border-radius итак кроссбраузерный для ВСЕХ современных браузеров! http://htmlbook.ru/css/border-radius зачем что-то ещё изобретать?
t4t54t54, IE.
t4t54t54
да... но только не у осликов до 9й версии... поэтому и приходиится подстраиваться под мелкософт(((
благо в 9й версии уже хоть чтото работает )))
Если бы все ослики взяли и самообновились до 9-й версии - было бы ничего. А лучше бы они самоудалились))
А остальным можно уже сейчас указывать border-radius и не париться, все они всегда сами следать за "версией себя" :)
to Anton
У этой приблуды проблемы с hover.
то реакции не будет на
border работает на половину, толщина имеет место а цвета нет.
css3pie Такое решение тоже не очень =( Памяти жуёт много.
если мне не изменяет память, то в ИЕ в ховэр-эффекте и так будет фон #000... хотя может и ошибаюсь... попробуй прописать behavior:url(border-radius.htc); в самом a:hover{}
ага щеб працювало - ціни не було Б !
кому интересно, чтобы работало в 9-м IE и выше, в
надо добавитьСначала обрадовался, думал реально хорошее решение, а когда загрузил файлы на сервер вся радость пропала. )) Вообще не работает в IE 7 и 8, куда не скопируй этот файл, хоть вместе с css, хоть куда. В общем не советую. ))
чтото у меня становится прозрачным рамка и фон ?:(
Углы не скругляются в IE 6-8, хоть ты тресни :(
А от чёрного фона как-то можно избавиться? Если я в CSS специально прописываю фон для этого элемента, то в IE этот фон накладывается поверх рамок. :(
для_Grabowski
вот мой пример (проверено на IE7 & IE8, для 9-ки хватает border-radius, должно работать!!!): http://juhu.comuf.com/test/1.php
как следствие для ослика надо!!!: 1. чтобы файлик (border-radius.htc) находился в директории где будет сама страница, либо в нем прописать абсолютный путь к border-radius.htc 2. для ослика можно либо через хаки, дибо условные комментарии добавить:
в данном случае фон белый. Транспарент в данном случае не применим и не работает!!! поэтому только ручное присвоение типа фона для элемента который очерняется в IE!
Да, CyberK, спасибо.
по тестил не работает для fieldset :)
У кого не пашет, добавьте position:relative;
В IE8 и ниже при наведении не работает ни в какую! Хоть ты тресни, но не заработает с данным способом!
Вот тут очень неплохой генератор скругленных углов!
Максим, спасибо, то, что нужно. Я про сервис www.border-radius.ru/
Народ у кого не получается...
Надеюсь помог
Виктор, браво!!! Все решилось.
Молотца!
Небольшие 5 копеек по теме: Генератор border-radius
Подробно о border-radius css
Читайте также: box-shadow css
Кому нужно вот мой генератор border-radius, писал для себя когда-то.