Bluepearl Blog – Web Design Tutorials for vBulletin, Invision, XenForo, HTML, CSS & jQuery

CSS radius for Internet Explorer 8 and below

Recently I have been doing more web sites for clients to get some time away from vBulletin and XenForo Skins.

This one site I am working on uses a lot of CSS3 and looked great in Chrome, Firefox and Internet Explorer 9 but unfortunately in Internet Explorer 8 and below the site did not have the beautiful curves the newer browsers had. The site looked square and dull.

After browsing Google for a bit I found this great script which allowed my site to look beautiful once again for IE8 and below.

http://css3pie.com

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. Consider, if you will, the following CSS.

This CSS allows us to add a radius to a DIV element:


#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}


But unfortunately this only works in modern browsers except IE6, IE7 and IE8 which displays a square box. However, after you upload the PIE.htc file to your server and add this singe rule to the same CSS:


#myElement {
...
behavior: url(PIE.htc);
}


Now the radius will appear in earlier versions of IE

PIE also allows other new CSS3 features to work in earlier versions of Internet Explorer like shadows and gradients.