Border radius for all browsers?

Question

I use

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

for the border radius, but this block of code does not work with some browser (Internet explorer, of course). I tried to use .htc, but I was not successful.

How can I make border-radius that is supported by all browsers?

Answer 1

The border-radius property is supported in IE9 +, Firefox 4+, Chrome, Safari 5+, and Opera because it is a CSS3 property. Syntax:

 border-radius: 1-4 length|% / 1-4 length|%; 

Example 1

 border-radius:2em; 

is equivalent to:

 border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em; 

Example 2

 border-radius: 2em 1em 4em / 0.5em 3em; 

is equivalent to:

 border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; 

Read more about the explanations and tips and tricks for the border radius here .