CSS browser safe way to apply a radius border?

I want to apply a 3px top left & top right radius border.

How can I do this across all browsers (e.g. IE, WebKit, Mozilla)?

And if the browser doesn't support the border-radius attribute, just default开发者_开发百科 to no radius (square corner).

If IE ever supports any standards ill eat my hat.

This is the best you can hope for:

-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;

Edit: my bad, missed the "top left and right only" part, corrected the codez

border-radius.com is great for this:

-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;

check this topic. it should cover all your needs in rounded corners: Emulating CSS3 border-radius and box-shadow in IE7/8

border-top-left-radius:3px;
border-top-right-radius:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-top-left-radius:3px;
-moz-border-radius-topright:3px;
-moz-border-radius-topleft:3px;

This will work in Mozilla and Webkit browsers and anything supporting CSS3 border-radius property. IE = no go. Also, you should note that FF2 will support this but the rounded edge is not very pretty.