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:
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:
Oh, and Safari doesn't seem to support a radius given in percent, mozilla does:
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.