CSS Border RADIUS, which is the correct style to use? border-radius? -webkit-border-radius? -moz-border-radius?

Question

I would like to use CSS to create nice round border. I'm aware of the following CSS Style:

 border-radius
-webkit-border-radius
-moz-border-radius

Which style(s) are the best to use?

Answer 1

You should use all three rules.

This way, your page will work both on current versions of Mozilla and WebKit and on future browsers that implement the standard.

Answer 2

You should use all of them (for now). -moz targets Mozilla browsers and -webkit targets Webkit browsers. Technically you don't need the plain border-radius but best practices say you should include it so when CSS3 goes live you already have it implemented.

Answer 3

-webkit-border-radius is for webkit based browsers such as Safari & Chrome. -moz-border-radius is for Mozilla products such as Firefox. border-radius is what will be used when the standard is finalised, although Opera currently uses it.

Use all 3 to ensure the most compatibility.

Answer 4

/* Gecko browsers */
-moz-border-radius: 5px; 
/* Webkit browsers */
-webkit-border-radius: 5px; 
/* W3C syntax - likely to be standard so use for future proofing */
border-radius: 5px;

Internet Explorer 6 & 7 and 8 (as far as I know) and Opera do not support rounded corners. Instead these users will see a regular corner.

You can get started using Firefox and any of the 'Mozilla' family of browsers. Apple's WebKit web browser engine also supports rounded corners making them available in the Safari and Chrome web browsers, the iPhone and other devices running WebKit.

Detailed Answer of your question is here

http://shapeshed.com/journal/css3_tour_border-radius/

and for IE use these solution http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html

http://www.css3.info/a-border-radius-solution/

see some more cool info here about corners http://www.the-art-of-web.com/css/border-radius/