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

  1. avatar
    wrote this comment on

    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>

    1. avatar
      wrote this comment on

      Hi, IE doesn't support the border-radius yet (not sure about IE 8).

    2. avatar
      wrote this comment on
      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
      1. avatar
        wrote this comment on
        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.
  2. avatar
    wrote this comment on

    IE8 Wont Support border-radius. Stick with non-beta versions of IE. I had trouble going to windows.com with IE8. Stick to Firefox

  3. avatar
    wrote this comment on

    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/

    1. avatar
      wrote this comment on

      Thanks, fixed!

Start a new thread

Cancel reply
Markdown. Syntax highlighting with <code lang="php"><?php echo "Hello, world!"; ?></code> etc.