Border radius for all browser?

Question

I use

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

for border radius but that code block not working some browser (internet explorer of course). I tried to use .htc but I had no success.

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

Anyone finding this through a search, see also related [Support for “border-radius” in IE](http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie) — JGallardo, Aug 30 '14 at 01:21

score 8 · Answer 1 · answered Nov 02 '12 at 08:05

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

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;

See more detailed explanation and tips and tricks for border radius here.

1 Answers1