Border and Box Effects 101
Figure 9-5: Irregular rounded corners produced with the border-radius shorthand property
Using Percentage Values
The examples so far in this chapter use length units, but you can also define
border-radius using a percentage value, which is the percentage of the length
of the side of the element it’s applied to. You’ll find this especially handy if
you want to make a perfect circle in CSS: A square element with four equal
curves of half of each side creates a perfectly round element.
The next example shows two elements with the same percentage border-
radius value (50%) applied to each corner. Both have the same height, but
one is twice as wide as the other:
div {
border-radius: 50%;
height: 100px;
}
.ellipse { width: 200px; }
.circle { width: 100px; }
The result is shown in Figure 9-6. The element on the left has the wider
length, so the rounding of the corners creates an ellipse. On the right, the
element has equal height and width, resulting in a perfect sphere.
Figure 9-6: Percentage values on border-radius create an ellipse (left) and a circle (right).
Using Images for Borders
Another common way to style elements is to use background images as dec-
orative borders. With CSS2, however, you had no way to achieve this, and
you had to use a lot of extra markup to get the desired effect, with a subse-
quent penalty on semantics and maintainability. CSS3 introduces a series of
properties that provide a simple syntax to apply decorative borders.
