CSS Cross-Browser Curved Borders

Question

What is the correct/best way to define cross-browser CSS/CSS3 compliant/valid curved borders?

Is there a non-JavaScript way of doing so, while being cross-browser compatible? If not, is there any proper workaround?

Answer 1

Have you tried:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px

together? That should cover the primary 3 browsers in their latest releases (at least). Without javascript or using images, you're not going to get full cross-browser coverage.

Answer 2

See the CSS Border Radius Generator (simple rounded corners) or CSS3 Please (more effects) for a CSS-only solution. If you want something that works in Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ with no images then try Raphaël . Here's a nice talk by Dmitry Baranovskiy , author of Raphaël, explaining why it's cool.

Answer 3

The best way to do it is with border-radius.

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px

This is only compatible in Safari, Firefox and Chrome. This does not work for IE 7+8 (and less)

If you want the most compatibility but the least amount of flexibility, images are the way to go.

If you want flexibility and browser compatibility go with javascript. The best one I have found converts the CSS3 declatation to rounder corners in IE 7+8.

Check that one out here: http://www.curvycorners.net/

Answer 4

You should use this:

-moz-border-radius: 20px;
border-radius: 20px

WebKit has supported plain border-radius for a while now.

http://css3generator.com/ for example, has dropped the -webkit prefix.

To make this work in Internet Explorer, I recommend using CSS3 PIE , which is as simple as downloading a small file, and adding this to your CSS:

behavior: url(PIE.htc)

Of course, this will only work when Javascript is turned on in IE (which is usually the case).