How can I maintain border radius in all major web browsers?

Question

There seems to be no way to maintain a border radius except to provide CSS for each engine separately. Right now, it seems you need to declare the property three or four times (perhaps more if you want to support more obscure engines).

My intermediate solution is to pass all my CSS through this regex:

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;

It searches for all instances of the official CSS3 selector and replaces it with its own, as well as engine-specific selectors for Mozilla, WebKit and KHTML.

Is there a better way?

When are WebKit and Mozilla planned to support CSS3 selectors? (Do they already exist?)

Answer 1

:

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

.

? , (, firefox 4), , CSS. , , CSS3, CSS.

Answer 2

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

( )

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

Answer 3

CSS:

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

IE is the only browser that does not currently support it (until IE9 launches it). But until then you can use this script: DD Roundies . This is a script that will cover corners in IE with a small amount of settings. Here's another Curvy Corners that searches for the webkit rule and adds them to IE.