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.

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay

Related posts:

  1. Zero Conf Mail
  2. My favorite Firefox Add-ons

Nicolas Kuttler This entry was written by nicolas, posted on 23. October 2008, filed under Content Management and tagged , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.

5 Comments

Leave a Reply

Your email is never shared. Required fields are marked *

*
*