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

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

  • 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 не сдается 🙁

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

  • Nekit

    *css код в head

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

  • Nekit

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

  • 2ar

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

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

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

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

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

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