Верх страницы
Обложка к записи Кроссбраузерный border-radius
Время для прочтения: 0 мин. 29 сек.

Кроссбраузерный border-radius

Скруглённые уголки больная тема каждого верстальщика. Как только не изголялись они, чтобы добиться нужного результата.

Теперь есть достойный вариант, CSS + HTC для Internet Explorer.

CSS:

.curved {
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari, Google Chrome */
    -khtml-border-radius: 5px; /* KHTML */
    -o-border-radius: 5px; /* Opera */
    -ms-border-radius: 5px; /* IE8 */
    -icab-border-radius: 5px; /* Icab */
    border-radius: 5px; /* CSS3 */
    behavior: url(border-radius.htc); /* IE */
}

HTML:

<div class="curved">Блок со скруглёнными углами</div>

Возможные проблемы

По стечению обстоятельств может случится так, что сервер или браузер могут неправильно интерпретировать .htc файл. Чтобы этого не произошло, нужно связать расширение .htc с типом данных text/x-component. В .htaccess пишем:

AddType text/x-component .htc

Если у вас нет доступа к .htaccess (например бесплатный хостинг не дает его создать), вызываем .htc файл через PHP скрипт, отдавая правильный заголовок. В CSS укажем путь до нашего скрипта:

.curved {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -icab-border-radius: 5px;
    border-radius: 5px;
    behavior: url(border-radius.php);
}

А в файле border-radius.php пишем примерно так:

<?php
header("Content-type: text/x-component; charset=utf-8");
include_once "border-radius.htc";
?>

Теперь все должно работать как часы.

В браузере Opera < 10.5, естественно ничего не работает, но можно добавить поддержку через SVG

На локальной машине (без виртуального сервера) в IE без шаманства с бубном и настройками браузера работать не будет

Поддержка браузерами

Ссылки

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

15 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Главный Лаборант
14 лет назад

Вот что больная тема — это точно!
Надо будет протестить данный прием!

Алексей
13 лет назад

Скрипт для IE6 не работает, если блок со скругленными углами содержится в блоке, где есть фоновые картинки.

2ar
2ar
13 лет назад

В border-radius.php надо наверно подключить border-radius.htc а не border-radius.php
сстрока 3 include_once «border-radius.php»;

Nekit
Nekit
13 лет назад

Не могли бы вы сделать пример с использованием файла css? У меня почему-то работает только через css код в

Nekit
Nekit
13 лет назад

*css код в head

Олег
Олег
13 лет назад

Запускал на локалкосте — не работает. Пробовал прописать в .htaccess и подключал пхп — все равно IE не сдается 🙁

Владимир
Владимир
12 лет назад

у меня тоже не работает в .htaccess прописал AddType text/x-component .htc

но в ие углы блоков все равно не скругляются http://test.liwil.net/mausvill/get/все-цены

Александр
9 лет назад

http://step-web.ru/online-service/css-border-radius.php пример можете генерировать сами. На Денвере есть проблемы border-radius.htc, но это не значит что это не будет работать на хостинге.

Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы