When using CSS border radius I’ve always specified the radius in pixels (px), something like this:
[sourcecode lang=”css”]
.round-box {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
[/sourcecode]
This got me to wondering, does it support percentages as well? So I tried this:
[sourcecode lang=”css”]
.round-box {
border-radius: 5%;
-moz-border-radius: 5%;
-webkit-border-radius: 5%;
}
[/sourcecode]
This worked in Firefox 3.6 but not in Chrome. Some searching around revealed the Mozilla -moz-border-radius page. For border radius it specifically mentions that it supports length units as well as percentages:
A percentage, relative to the width of the box (the percentage is relative to the width even when specifying the radius for a height).
That page also mentioned support for elliptical borders. To do that you add another radius value separated by a slash:
[sourcecode lang=”css”]
.round-box {
border-radius: 15px / 50px;
-moz-border-radius: 15px / 50px;
-webkit-border-radius: 15px / 50px;
}
[/sourcecode]
The elliptical border worked on Chrome as well. If you bend this tight enough you can get pretty close to a circle.
I wanted Internet Explorer to add support for border radius before; now that I’ve got even more radius toys to play with I’m practically begging. I’m sorry Internet Explorer users but I’m tired of various border hacks when there are simple and clean CSS methods available.