While IE6 is all but dead, IE8 still remains one of the most popular browsers. This unfortunate state of affairs means we still need to use horrible, non-semantic markup to get certain CSS3 features that we’ve all come to know and love, including rounded corners and drop shadows.

Enter CSS3 PIE. I stumbled across this neat little shim and it works wonders. It makes use of a little-known CSS property called behavior to extend IE8′s CSS vocabulary to include a subset of those time-saving CSS3 features.

All you need is the PIE.htc file, an HTML Component file that contains javascript which is attached to an element via the behavior property. Use your border-radius or box-shadow properties, add this one line, and you’re done*:

behavior: url(PIE.htc);

A few caveats before you go willy-nilly with your CSS3 PIE:

• The url descriptor in a behavior property does not behave as you would expect. Instead of the using the location of the CSS file as you would expect from using url() in the background-image property, the htc file must located in the document root.
• There are some limitations here, so you will need to be careful and test copiously when you use CSS3 PIE. See the known issues page for more details.
• Because of how PIE.htc works (by injecting those same non-semantic tags you would have to add yourself), this may break some CSS selectors if you use direct sibling selectors, for example.

Until IE8 goes the way of IE6, however, this technique can be a huge timesaver and will help get you thinking more semantically when creating your markup.