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

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.