HTML and CSS Reference
In-Depth Information
BORDER-RADIUS
: GOD
BLESS
THOSE ROUNDED
CORNERS
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:
border-radius: 10px;
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
.
