Как сделать закругленные углы в Internet Explorer 8 и ниже

CSS3 позволяет сделать закругленные углы у блока или изображения с помощью свойства border-radius. Но, как вы знаете, данное свойство не работает в браузере Internet Explorer 8 (IE8) и более ранних версиях. И когда вы применяете данное свойство, то оно выглядит точно также, без каких-либо закруглений.

Многие говорят что нужно просто игнорировать IE8. Конечно, можно сделать и так. Но если вы работаете в какой-нибудь фирме, или просто хотите чтобы сайт выглядел правильно во всех браузерах, то вы должны знать как это сделать.

CSS3Pie

CSS3 PIE(чтобы вы понимали CSS3 Progressive Internet Explorer) — это модуль, который позволяет использовать в браузере Internet Explorer некоторые свойства CSS3(тень, линейный градиент и закругленные углы).

В этой статье мы рассмотрим как данный модуль использовать, чтобы сделать закругленные углы.

Скачиваем данный модуль здесь.

И размещаем его в папке с файлом стилей вашего сайта:

Далее в файле стилей пишем:

1
2
3
4
5
6
7
8

.bradius {  
    height: 100px;  
    width: 100px;  
    background-color: #2ecc71;  
    -webkit-border-radius: 50px;  
    -moz-border-radius: 50px;  
    border-radius: 50px;  
}

Если браузер поддерживает CSS3, то мы увидим:

А в браузере IE8 и ниже мы увидите следующее:

Для для того чтобы использовать файл PIE.htc, необходимо в файле index.html написать:

1
2
3
4
5

<style>
.bradius {  
     behavior: url('css/PIE.htc');
}
</style>

Сейчас обновите страницу и увидите следующее:

Посмотреть примерСкачать

Я проверял с помощью сервиса netrenderer.com.

Вывод

Если вы делаете сайт для кого-то, или просто хотите чтобы ваш сайт правильно и красиво выглядел во всех браузерах, тогда вам пригодится данное свойство.

Успехов!