#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.