Время для прочтения: 1 мин. 14 сек.

Кроссбраузерный 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 без шаманства с бубном и настройками браузера работать не будет

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

Нажимая на кнопку "Отправить", я даю согласие на обработку персональных данных.

15 комментариев

сначала новые
по рейтингу сначала новые по хронологии

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

Владимир

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

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

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

У чего именно должны быть скруглены углы?

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

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

Олег, покажите ваш пример, если не сложно.

*css код в head

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

Что вы имеете ввиду? Пример страницы покажите.

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

В border-radius.php надо наверно подключить border-radius.htc а не border-radius.php

сстрока 3 include_once "border-radius.php";

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

Точно. Спасибо - поправил.

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

Что вы хотите этим сказать?

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

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

Пример пробовали запускать? Через localhost?

Вот что больная тема - это точно!

Надо будет протестить данный прием!