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).
+3
A:
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
Andrew Bullock
2010-05-03 17:10:12
IE is the first one in his list, but the only one not covered by your example :P Check the link i have posted
meo
2010-05-03 17:11:19
True, but the OP also said "And if the browser doesn't support the border-radius attribute, just default to no radius" which is what will happen. So the answer is correct.
Dan Diplo
2010-05-03 17:12:39
To elaborate, @sarah, this is exactly what you want. IE does not support rounded corners, so it will simply show square ones. WebKit (Safari) and Moz (Firefox et al) do support rounded corners, via the browser-specific CSS (the rules with the prefix). The simple `border-radius` is used for future-proofing.
Matt Ball
2010-05-03 17:14:27
sarah
2010-05-03 17:14:56
ok i take my downvote back :P
meo
2010-05-03 17:15:34
you can throw in some DD_[roundies](http://www.dillerdesign.com/experiment/DD_roundies/) for some IE round corners w/o images.
David Murdoch
2010-05-03 17:21:29
+1
A:
check this topic. it should cover all your needs in rounded corners: http://stackoverflow.com/questions/2687804/emulating-css3-border-radius-and-box-shadow-in-ie7-8
meo
2010-05-03 17:10:22
+1
A:
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;
artlung
2010-05-03 17:12:17
meo's link is good. Jump to this page: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ as well. There is no straightforward CSS solution for MSIE. :-(
artlung
2010-05-03 18:05:23
A:
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.
Reece
2010-05-03 17:12:32