CSS3 logo

Use CSS3 now in IE

To quote the PIE website “PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features”

PIE is a htc script file that you place on your server with your website that makes IE render rounded corners, box-shadow and even CSS3 gradients.

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. Using PIE is easy, you simply add this after your CSS3 declorations.

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

This results in a box with nicely rounded corners in any of today’s modern browsers, except of course for IE 6, 7, or 8, which all display a square box. However, add the following single rule to that CSS:

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

Now the exact same rounded corners appear in IE! That’s all there is to it. No, really, I mean it.

PIE currently has full or partial support for the following CSS3 features:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

Other features are under active development.

Want to learn more? View some live demos, read the documentation, and download PIE to try it yourself. Be sure to read the Known Issues page for common problems and their solutions.

Leave a Comment