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.

Published on Oct. 23, 2008 at 12:47 a.m. by Nicolas and tagged JavaScript, Webdesign, safari, border-radius, CSS. You can follow the discussion with the comment feed for this post.

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>

Reply to this comment
- 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).
  
  Reply to this comment
- 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
  
  Reply to this comment
  - 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.
    
    Reply to this comment
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

Reply to this comment
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/

Reply to this comment
- nicolas wrote this comment on Jan. 18, 2009, 2:47 p.m.
  
  Thanks, fixed!
  
  Reply to this comment