HTML and CSS Reference
FIGURE 4.1 A simple container
with equally rounded corners.
Rounded corners are vital for street cred, critical for keeping with the Web 2.0 cool
school, and essential if you want to impress your significant other.
These elements are such a commonly requested design feature that the spec
writers added the border-radius property to the Borders and Backgrounds module
( www.w3.org/TR/css3-background). The syntax is very simple to use (see border-
radius-examples.html in the code download for many examples). You can specify
a single value for the radius size of all the rounded corners. For example:
Yo u c a n u s e p i x e l s o r a n y o t h e r C S S u n i t t h a t m a k e s s e n s e . T h e p r e c e d i n g l i n e
of code results in corners like those in Figure 4.1 .