How to make CSS3PIE work

Written by Jakob Løkke Madsen

08. October 2010

Countless hours have been lost creating rounded corners, dropshadows and gradient backgrounds for the web.

With Internet Explorer still lacking support for CSS3, until recently it seemed like we would have to keep doing tiny graphic sprites (or implementing dirty javascripts) in order to accomodate the demand for such UI niceness.


Enter: PIE is a .htc CSS behaviour script that enables support for dropshadows, rounded corners and background gradient CSS3 properties in Internet Explorer - all the way back to IE6!

Of course, I couldn’t wait to try it out. And it didn’t work. Bummer …

Fortunately, I found out why: It only works on positioned elements.

You must specify “position: relative;” or “position: absolute;” on the element that calls the .htc behaviour, and then it works!

Amazing script! CSS3 future is here now. Thank you so much, Jason Johnston of 327 Creative LLC, for sharing this little goodie with the world!

comments powered byDisqus