Rounded Corners and More! CSS3 PIE Makes Developing for IE Suck Less.

OK, so we all know how much IE sucks. Well I just stumbled across a neat little trick that makes IE suck less. It’s called Progressive Internet Explorer (PIE). It’s a simple and very effective way to use some advanced CSS features and have them actually work inside of Internet Explorer. PIE supports the following CSS3 features in IE 6-8:

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

Instead of using Javascript and/or images, it uses a 28K .htc file which is loaded simply by uploading the PIE.htc file into your CSS folder and adding the following to your CSS on elements using any of the advanced CSS features

I had been searching for an easy way to do rounded corners in internet explorer for a while before I discovered sweet, glorious PIE. There are many methods involving images and Javascript, and even a few other .htc file implementations, that create rounded corners, but in my opinion they are all junk compared to PIE. PIE has the added benefit that the PIE.htc file is only loaded in IE and only when called from the stylesheet; it doesn’t increase the overhead on any of the good browsers!

PIE is an open source project available on github. So if you have the skills, please contribute and let’s get all CSS3 behavior rolled into this thing.