Скруглённые уголки больная тема каждого верстальщика. Как только не изголялись они, чтобы добиться нужного результата. Теперь есть достойный вариант, 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 без шаманства с бубном и настройками браузера работать не будет
Ссылки
Источник: https://www.kobzarev.com/programming/curved-corner-border-radius-cross-browser/
