Pure CSS Rounded Corners in IE6-8 (JQuery Accepted)

Question

There are a lot of JQuery plugins to give rounded corners to browsers that dont support CSS3. They either don't work or have an ugly effect where you see it unstyled, and then the JS kicks in and finally makes them rounded.

I am looking for a solution that renders rounded corners before visibility, looking for a seamless, or near seamless solution.

The best match I have come to so far if the use of .htc files with www.css3pie.com. There is still that delay (Not sure if it can even be solved).

css3pie is around 26k compressed, the owner stated that if you have JQuery there could be scripts that would be less. (I plan on using JQuery throughout anyways).

Ideally, I'd like it to support gradients, border-radius, and box-shadow. Currently css3pie does all of this how I need, except for box-shadowing. It messes up if the background is transparent as indicated here: http://github.com/lojjic/PIE/issues#issue/12

I am willing to accept inability of any of these features in IE6.

I guess maybe I just can't have one's cake and eat it too. For now, I will be sticking with css3pie.com and putting up with annoying delay, and not allowing for box-shadow in IE. Not a huge deal because IE9 is suppose to fix that -crossing fingers-

Answer 1

The CSS3 PIE library handles a lot of things for IE6/7/8 including:

• Border Radius (rounded corner)
• Box Shadow
• Border Image
• Gradient Backgrounds

Its pretty handy.

Answer 2

If you must support rounded corners for IE6, than maybe you could have a look at Curved Corner.

I would call the behavior:url(border-radius.htc) via a conditional IE6 CSS file.

Personally, I would just ignore curved corners in IE6 altogether.