Bluepearl Blog – Web Design Tutorials for vBulletin, Invision, XenForo, HTML, CSS, PHP & 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.

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 file to your server and add this singe rule to the same CSS:

#myElement {
behavior: url(;

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.