Scott B Scott B - 5 months ago 12
CSS Question

Rounded Corners in IE 7+ with/without javascript?

To create rounded corners on my container elements I use this css...

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


However, IE does not appear to recognize and interpret the border-radius property (at least version 7-8, apparently its slated for version 9).

Is there a workaround for this that's doable entirely in css (no script, no extra markup)?

For Javascript/jQuery solutions: I'd use a solution based on these if I could include a single script that would read my css, interpret the border-radius properties (including border-top-left-radius, border-top-right-radius), and apply the corners accordingly. Does this exist?

Answer

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 :)

Comments