Rounded corners in IE – the best solution

I've struggled for months, trying to find a good rounded corner solution for non-CSS3 capable browsers. There are great options out there, but none of them really seemed to meet every need and offer simplicity to boot

Well, my search is over. Enter PIE.

How would you like to make many of your CSS3 rules (included border radius) work in IE 6, 7 & 8, with only one-line of CSS?

behavior: url(/src/js/PIE.htc);

That's right, just add that little CSS rule to your style block, and you're up and running!

Well, almost. There's a couple things you should know first.

1. IE doesn't even give your .htc files the time of day, unless they are of the text/x-component content type. This is easy in Apache:

   <VirtualHost...>

   
   …
   AddType text/x-component .htc
</VirtualHost>
    
2. It doesn't really like 'static' positioned elements, which is basically every element, unless you specify otherwise. Clearly, the position value which has the least effect layout-wise is position: relative.  Unless of course you have children elements which are absolute positioned.

 

Once you have those two elements in place, you're off to the races. Start rounding those corners!

 

#round-this-please { position: relative; border: 1px solid #a3a3a3;
                             border-radius: 0 10px 10px 10px;
                             behavior: url(/src/js/PIE.htc); }