Putting it All Together - HTML5 with CSS3 - page 382

Rounded Corners
HTML elements naturally form rectangular boxes when a browser renders them. It's an inescapable part of
the medium's pixel-based nature. Applying a background or border to any HTML element reveals the
rectangular, sharp-cornered box that surrounds its contents, and many early CSS designs tended to be
boxy, sharp-cornered affairs. Rounding off those corners is one way to soften that inherent boxiness and
make web pages feel smoother and more organic.
Unfortunately, earlier versions of CSS didn't make it easy. There was no means of rounding corners in
CSS so designers found other ways to simulate the effect, usually with round-cornered background
images positioned into the corners of an otherwise square-cornered box, often requiring multiple nested
elements to carry those backgrounds (remember, multiple backgrounds also weren't possible until
recently). Creating rounded boxes has become much simpler with CSS3 and the border-radius
property.
The border-radius property defines the radius of an imaginary circle in the corner of an element (or two
radii of an imaginary ellipse, but we'll get to that shortly). Instead of being drawn at a right angle, the box's
corner follows the arc of this imaginary circle, like you see in Figure 10-26.
Figure 10-26. Visualizing the way browsers render rounded corners by tracing imaginary circles
Like other box properties—margins, padding, borders, and outlines—you can declare a border-radius in
several ways to apply different effects to different corners. Most simply, the shorthand border-radius
property with a single value applies equally to all four corners of the element:
.pillow { border-radius: 10px; }
The same shorthand border-radius property with two values applies the first radius to the top left and
bottom right corners, and the second radius to the top right and bottom left corners:
.pillow { border-radius: 10px 30px; }
With three values, border-radius applies the first value to the top left corner, applies the second value to
both the top right and bottom left corners, and the third to the bottom right corner:
.pillow { border-radius: 10px 30px 12pt; }