Rounded corners in IE 7+ with/without JavaScript?

Question

To create rounded corners on my container elements I use this CSS:

border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;

H

Answer 1

As far as I know for IE<9 there is no way to do this in pure CSS.

It has been documented that IE9 has border radius support.

There are Javascript workarounds available, but as you said you don't want to implement them, you're a bit stuck.

Unless you want to use images, this works well if you have static size elements, but doesn't work if they change size.

Other than that, I am not aware of any pure CSS solution without a lot of hacky markup.

---

Update:

I already linked to a resource that can do this for you, the CurvyCorners jQuery will detect the use of -webkit-border-radius and moz-border-radius on DOM elements and duplicate the effect in IE using a series of small DIVs with no images. You can also tell it to apply the effect to specific elements.

---

Update #2:

After Spudley's suggestion of checking out CSS3Pie, I would very much suggest this as the way to go as it uses the CSS property behaviour which only applies to IE, so it won't screw with the rest of the browsers, also this means no hacky markup added to your page (Curvy Corners adds many small divs) and no use of images.

Hope it helps :)