IE6-8 CSS3 border-radius support with CSS3 PIE

I received a wonderful tip-off from one of my colleagues this week via Slashdot. My dreams had come true and along with it sanctimonious giggles for all the people I’ve known in the past who’ve worshiped Internet Explorer enough to waste time and money on supporting the browser’s lack of CSS support, rather than engaging with – let’s face it – more useful and engaging tasks; tasks we should all justify and convince to our clients before a project begins.

The odds certainly stack up nicely against singling out any non-standardized browser for special treatment in 2010 and I’m proud to say I’ve stuck to my guns and been firmly in the progressive camp for some time now on this issue – partly the reason I’m so happy to be a web designer right now.

I digress.

Enter CSS3 PIE.

PIE is still a young project with big plans. But it’s already good enough to save you a lot of time and make your life as a Web developer much easier. Happy CSS3 coding!

CSS3 PIE is a behavior plug-in, proprietary to IE, that sits beside your stylesheet adding support for the following common CSS3 properties in versions 6-8 of IE:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • background linear gradients

At the time of writing this post there is currently one primary drawback – notably in IE8 when deploying with Prototype – where a performance gripe causes a complete browser crash. So count yourself unlucky there for the time being if you’re a Prototype user.

Combined with the likes of Modernizr this is possibly the greatest thing (dare I say it)  since Firebug for a front-end specialist. Hopefully you feel the same after checking it out:

1 Response to “IE6-8 CSS3 border-radius support with CSS3 PIE”

Leave a Reply

ATTENTION: Feel free to use HTML - all the important tags should work. Please wrap your scripts in <code>...</code> - thanks!