Время для прочтения: 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?

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

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