About the CSS3 border radius property

So I have decided to use the CSS3 border-radius property on some sites. They are personal projects so I don't care if they look a little worse on IE. After a few tweakings I've ended up with using things like this:

#foo {
    border-radius:          8px 4px 4px 8px;
    -moz-border-radius:     8px 4px 4px 8px;
    -webkit-border-radius:  8px 4px 4px 8px;
    -khtml-border-radius:   8px 4px 4px 8px;
}

No browser seems to support the first notation yet. That's fine as CSS3 isn't complete. However, mozilla, webkit and khtml-based browsers should be ok. IE and Opera will just ignore those.The syntax differs in some details though, see for example:

    -moz-border-radius-bottomleft:      5px;
    -webkit-border-bottom-left-radius:  5px;

Oh, and Safari doesn't seem to support a radius given in percent, mozilla does:

    -webkit-border-bottom-left-radius:  10%;

This doesn't work for me in Safari. By the way, this blog's wordpress template uses CSS3 border radiuses. Hi IE users :-)

Update: This post led me to Drew Diller's blog. He has an interesting technique for rounded corners in IE.

Another technique by Remiz: see other technique for rounded corners in IE. Who knows, maybe I will be able to deploy sites that use border radiuses in the future, even if Microsoft has no plans for supporting them in IE8.

7 comments

rajuda wrote this comment on Dec. 3, 2008, 2:31 p.m.

I have put this code but main proble is IE6,IE7

.table_border
{
/*background-color: #ffffcc;*/
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
-khtml-border-radius:1em;
border: 1px solid #CCCCCC;
padding: 10px;
width:564px;
height:auto;
}
<a href="http://www.cssdog.com/css_borders.html" rel="nofollow">http://www.cssdog.com/css_borders.html</a>
nicolas wrote this comment on Dec. 3, 2008, 5:10 p.m.

Hi, IE doesn't support the border-radius yet (not sure about IE 8).
Walter wrote this comment on Jan. 16, 2009, 10:46 p.m.

IE8 Wont Support border-radius. Stick with non-beta versions of IE. I had trouble going to windows.com with IE8. Stick to Firefox
Pasha wrote this comment on Jan. 18, 2009, 6:23 a.m.

Thanks for the links.
Remiz's trick for rounded corner works in IE also. ( Its not Demiz :) )

http://www.htmlremix.com/curved-corner-border-radius-cross-browser/
nicolas wrote this comment on Jan. 18, 2009, 2:47 p.m.

Thanks, fixed!
chand khan wrote this comment on Dec. 16, 2011, 1:26 p.m.

hi sue this one #myAwesomeElement { width:250px; margin:0 auto; height:200px; border: 1px solid #999; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; behavior: url(PIE.htc); } and download PIE.htc from (http://css3pie.com/) and give right path yamm its work in All ie vesions since ie6
Nicolas Kuttler wrote this comment on Dec. 16, 2011, 1:53 p.m.

Interesting, haven't tried that one yet. In the past I've only had bad experiences with .htc hacks, but I'll give it a try when I get the opportunity. Though nowadays I don't do that much frontend coding any more.

7 comments

Reply