How do I make IE show my CSS3 Properties?

How to make the dreaded, yet painfully common browser known as Internet Explorer render CSS3 properties that other "normal" browsers render with ease. This is a question that has plagued many a web designer since the introduction of Cascading Style Sheets version 3.

For the uninitiated, CSS3 was an exciting addition to CSS1 and CSS2 that enabled the styling of web page elements. For example background colors, font types, font-transformations, and a myriad others.
CSS3 was very exciting for web designers in that it introduced more visual features; rounded corners, shadows, multiple background, color gradients, rotated (angled) text, and much much more.

If you see curved edges and box shadow, your browser is CSS3 compatible! :)

The reason many of CSS3's powerful features are not as commonly used as they should be is due to a sizable percent of internet users who are still using dinosaur-age and/or outdated browsers such as IE6, IE7, and IE8. Web designers, therefor cannot implement CSS3 into their work.

Or can they? Other than using engine-specific CSS3 prefixes (-moz-, -webkit-, etc), there is one very simple, very effective way to approach CSS3 properties in old browsers. It's called PIE.

Note: PIE is not a reference to the delicious bakery dish made of a pastry dough shell and filling, but in fact it is an acronym for 'Progressive Internet Explorer'.

How it works is by downloading a '' file from here and linking the elements behavior to that file.

So say you have something like this:

border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

Now this is great and will show a nice curved edge in everything but IE6 IE7 IE8 .
To make it work in older IE browser we just would need to add the following:

behavior: url(;

And that's all there really is to it!

Edit: I should also mention that PIE only works for a select few CSS3 properties, namely: border-radius, box-shadow, border-image, multiple backgrounds, linear-gradients