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;

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

Answer 2

You ask for a way to do it without scripting and without any extra markup. This simply isn't possible. The feature is missing from IE7/8, and the only way to get IE to do it is by simulating the feature either with scripting or markup.

The best options are ones which only affect IE and are invisible to other browsers. This means that CSS3Pie stands head and shoulders above all the other options, because the technique it uses is only supported by IE. It also allows you to specify your border radius in CSS in the same way as for other browsers, making it more consistent.

Personally, I'd go for this solution every time. It's by far the cleanest solution you'll find for IE. Forget about any jQuery or pure javascript solutions; they almost all have issues of one sort or another, and as for markup options that involve corner graphics; just don't even think about it!

The real benefit that CSS3Pie has over other common solutions is that it uses a vector-graphics based solution, rather than pasting loads of divs into your document as CurvyCorners and others do. This means that the rounded corners CSS3Pie generates are smoothly drawn and works properly with background graphics on both the element itself and those behind it. Most other solutions have serious issues in these areas.

I don't know why you'd object to using scripting - especially HTC-based ones like this which don't get in the way of the other scripts. The absolute worst case is that a user has scripting turned off. And in that case, all they get is square corners; it's not the end of the world.

Answer 3

you can use .htc for border radius.
link1 for htc files
link2 for htc files

I suggest to have a look at this site.
CSS3 Please

Answer 4

The scripting / jQuery solution you are talking about does exist, take a look at jQuery Curvy Corners.