The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

98 Chapter 9

rounded corners has meant creating four images and adding at least two

extra nonsemantic elements, which made maintaining a website much

harder than it needed to be.

But no more. The Backgrounds and Borders Module introduces a way to

round the corners of your elements using CSS alone. Each corner is treated

as a quarter ellipse, which is defined by a curve that is drawn between a

point on the x-axis and a point on the y-axis (you may remember those

from Chapter 6). Figure 9-1 illustrates this more clearly.

A quarter ellipse can be regular, which means the length along both

axes is the same, or irregular, which means the length along each axis is dif-

ferent. Figure 9-2 shows examples of both.

Figure 9-1: A quarter ellipse made

by the curve between lengths on

the x- and y-axes

CSS3 defines these curves using the border-radius property. With this

property, you can define the radius of the quarter ellipse simply, using the

following syntax:

E { border-v-h-radius: x y; }

In this syntax, v is a keyword value of top or bottom; h is a keyword value

of left or right; and the x and y values are lengths along the axes that define

the curve of the quarter ellipse. That sounds like a mouthful, but here’s an

example that should make it clearer:

div { border-top-right-radius: 20px 20px; }

This syntax will round the top-right corner of a div element with a

radius of 20px horizontally and vertically, which is a regular curve.

In fact, for regular curves, border-radius lets you simplify even further

by leaving out either the x or the y value; if one value is not specified, both

are assumed to be equal. So if you want to apply that radius to each corner

of your element, you use this code:

div {

border-top-left-radius: 20px;

border-top-right-radius: 20px;

Figure 9-2: A regular curve (left) has iden-

tical values on both axes; an irregular

curve has different values on each axis.