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

Кроссбраузерный 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

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

Ссылки

ВКонтакте
Одноклассники
Telegram

Комментарии
Подписаться
Уведомить о
guest
15 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Главный Лаборант
11 лет назад

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

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

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

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

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

Nekit
Nekit
10 лет назад

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

Nekit
Nekit
10 лет назад

*css код в head

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

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

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

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

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

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

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