How can I support border-radius on all major web browsers?

Question

There doesn't seem to be a way to support border-radius other than to provide the CSS for each engine separately. Right now it seems you have to declare the property three or four times (possibly more if you want to support more obscure engines).

My interim solution is to pass all of my CSS through this regular expression:

Regexp:

border(-)?(top|bottom)?(-)?(left|right)?-radius:(.+?);

Replace:

-moz-border-radius$1$2$4:$5;
-webkit-border$1$2$3$4-radius:$5;
-khtml-border$1$2$3$4-radius:$5;
border$1$2$3$4-radius:$5;

This searches for all instances of the official CSS3 selector and replaces it with itself, plus the engine-specific selectors for Mozilla, WebKit and KHTML.

Is there a better way?

When are WebKit and Mozilla planning to support the CSS3 selectors? (Do they already?)

Answer 1

Like this in CSS:

.myClass
{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

IE is the only browser that currently doesn't support it (until IE9 makes its launch). But until then you can use this script: DD Roundies. This is a script that will round the corners in IE, with a little bit of setting up. There is another one here at Curvy Corners which looks for the webkit rule and adds them to IE as well.

Answer 2

It should be :

.myClass
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

with border-radius below the other one.

why ? Because, now that new browsers doesn't need their own engine hack anymore (like firefox 4 for example), they should use the last command they receive in the CSS file. That way, the rounded corner should be the same in all browser understanding CSS3 specifications and you won't have to change your CSS soon.

Answer 3

For all four corner you can use the following one

-webkit-border-radius: 3px;
-khtml-border-radius: 3px;    
-moz-border-radius: 3px;
border-radius: 3px;

and if you want to add curve at any one corner (for now i show the bottom left) try the below

-webkit-border-bottom-left-radius: 4px;
-khtml-border-bottom-left-radius: 4px;  
-moz-border-radius-bottomleft: 4px;
border-radius-bottomleft: 4px;

Thanks

Answer 4

I'm currently exploring use of this solution for IE support of this. I have it working on their demo files on my local machine and am working on applying it to a website today: http://www.css3pie.com