CODEWITHSUNDEEP
css
regxcode
regxcode

Reputation: 423

Border radius for all browser?

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?

Upvotes: 8

Views: 13556

Answers (1)

Bud Damyanov
Bud Damyanov

Reputation: 31839

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.

Upvotes: 8

Related Questions