CSS3 has a neat border-radius property that Firefox and nightly builds of Safari let you use. Unfortunately the syntax is a bit different:
Each version can take one or two arguments. One does both directions, two does horizontal and vertical separately.
Future CSS3 syntax:
For Webkit (Safari nightly) simply add -khtml- (or -webkit-) (ex.: -khtml-border-radius: 1em;) to the beginning of the CSS3 styles. Once the spec is finalized, Safari will support them as is.
Gecko (Firefox) is slightly different, but you can use them today:
Hopefully this will help others figure out why the Gecko-style individual corner syntax doesn’t work in Webkit. It took me a while.
slack — March 03, 2007
Your textile didn’t quite work as planned with the khtml and webkit prefixes.
Daniel Morrison — March 04, 2007
Ah, thanks slack. Fixed.
Robert — September 22, 2008
Thanks, I’ve stumbled across your post while I was researching the exact differences between Firefox and the other two browsers and this was just the piece of information which I was missing.
Cameron Kuc — August 19, 2009
Thank You for this post…….I couldn’t find the answer elsewhere.
Martin — February 10, 2010
“Hopefully this will help others figure out why the Gecko-style individual corner syntax doesn’t work in Webkit. It took me a while.”
→You did. Thanks a lot.