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:
border-radius: 1em;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em; 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:
-moz-border-radius: 1em;
-moz-border-radius-topright: 1em;
-moz-border-radius-topleft: 1em;
-moz-border-radius-bottomright: 1em;
-moz-border-radius-bottomleft: 1em;Hopefully this will help others figure out why the Gecko-style individual corner syntax doesn’t work in Webkit. It took me a while.
Comments
-
Your textile didn’t quite work as planned with the khtml and webkit prefixes.
-
Ah, thanks slack. Fixed.
