CSS3 PIE is a script to support for many useful CSS3 properties in Internet Explorer. With PIE you can use standard CSS3-properties in your stylesheet, which PIE will render using some arcane, IE-only rain dance. Other browsers are not affected by PIE.

We took a closer look at PIE to see if this could be the hack we've all been waiting for. tldr-version for the kids on Twitter: You should use CSS3 PIE today, but it comes with minor caveats.

• Support for rounded corners (border-radius) is amazing. You should stop using hacks like CurvyCorners today and never implement rounded corners with background images again.

• Drop shadows (box-shadow) works, but blurred shadows look darker than they do in Firefox and Webkit. This might or might not be ok with you, you should check the difference yourself. If you take a look at the "Learn more" buttons on our website, these were done with CSS3 PIE.

• PIE has some support for linear gradients, but it comes with strings attached. Since Opera has no support for gradients at all, and Firefox only supports them start version 3.6, we will continue to implement gradients with background images for the time being. Combining background images and rounded corners works great with PIE.

• There is no support for text-shadow yet.

• Because of the way PIE works, elements that use PIE need to be position: relative. This gave us pause at first, but then we realized we don't mind position: relative in most cases.

How to use CSS PIE unobstrusively

There are two annoyances when using CSS3 PIE. First, you need to apply a magic property to every CSS rule that should benefit from PIE. Second, you also need to make affected elements position: relative.

We found that we can eliminate any cruft introduced by PIE by adding those two additional properties to the Sass mixins we use for rounded corners and box shadows. We need those mixins anyway to support the vendor specific CSS properties like -webkit-border-radius.

This is how our mixin for rounded corners looks now (note the last two lines):

=round_corners(!radius)
  -moz-border-radius = !radius
  -webkit-border-radius = !radius
  border-radius = !radius
  behavior: url(/stylesheets/hacks/PIE.htc)
  position: relative

And this is how we include this mixin in any CSS rule:

.sidebar_box
  +round_corners
  background-color: #fe9