HTML round corners Internet Explorer

Question

How can i do round corners like this website has in some places.. I searched everywhere and found lots of code that i got confused which one to use

-moz-border-radius:10px;

-webkit-border-radius:10px;

behavior:url(border-radius.htc);

Which one should i use ? and why isn't it working with Internet Explorer ?

Answer 1

Internet Explorer 6-8 don't support css3, that's why border-radius doesn't work there.

For Internet Explorer 9 you can do rounded corners with (unprefixed) border-radius property (http://ie.microsoft.com/testdrive/HTML5/BorderRadius/)

For old webkit based browsers you need to use prefix -webkit.
For old mozilla based browsers you need to use prefix -moz.
For old version of Opera browser you need to use prefix -o.
For others you can use just a border-radius property without any prefixes

Your cross-browser code must be like that code below

{
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

For IE6-8 versions you need to use js plugins like http://css3pie.com/

Answer 2

These -moz-, -o-, -webkit- prefixes are necessary to support older versions of the browsers. Contrary to popular belief, however, the -ms- prefix does not apply for the border-radius property. When IE started supporting border-radius, at version 9, the vendorless border-radius property was used^Link.

-moz-border-radius: 10px;    /* Gecko, Firefox */
-webkit-border-radius: 10px; /* Safari, chrome */
-o-border-radius?: 10px;     /* Opera */
border-radius: 10px;         /* Modern browsers*/