CSS3's border-radius: property

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.

5 Comments

1. slack — March 03, 2007

   Your textile didn’t quite work as planned with the khtml and webkit prefixes.

2. Daniel Morrison — March 04, 2007

   Ah, thanks slack. Fixed.

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

4. Cameron Kuc — August 19, 2009

   Thank You for this post…….I couldn’t find the answer elsewhere.

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