CODEWITHSUNDEEP
htmlcss
sarah
sarah

Reputation: 3

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

Upvotes: 0

Views: 1233

Answers (4)

Andrew Bullock
Andrew Bullock

Reputation: 37378

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

Upvotes: 3

meo
meo

Reputation: 31249

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

Upvotes: 1

Reece
Reece

Reputation: 123

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.

Upvotes: 0

artlung
artlung

Reputation: 34013

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;

Upvotes: 2

Related Questions