HTML and CSS Reference
In-Depth Information
Here you give the newsletter box very subtle rounded corners (see Figure 5-4). Because the CSS3
Backgrounds and Borders Module (
www.w3.org/TR/css3-background/
)
, which this property is a part of, is
a “Candidate Recommendation,” you can use
border-radius
without vendor prefixes.
Figure 5-4
The newsletter box with subtle rounded corners.
Although you haven't given the newsletter box a style,
border-radius
still applies (because whether or not an
element has styled borders, the border of an element still exists).
border-radius
is shorthand for
border-top-left-radius
,
border-top-right-radius
,
border-
bottom-left-radius
, and
border-bottom-right-radius
. By specifying one value of
8px
for the
border-radius
, you tell the browser you want all four corners to be
8px
. What if you want each corner to have
a different value?
border-radius: 8px 12px 16px 20px;
This declaration gives the top-left corner a radius of
8px
and then works clockwise from there, giving the top-right a
12px
radius; bottom-right,
16px;
and bottom left,
20px
.
You also are able to create corners that aren't perfectly round by specifying two values for a corner, one for the hori-
zontal radius, and the other for the vertical radius, like so:
border-top-right-radius: 8px 20px;
If this declaration is applied, the top-right corner of an element has a horizontal curve of
8px
, going into a vertical
curve of
20px
.
If you want this noncircular radius to apply to all corners, you can use the shorthand
border-radius
property,
first specifying the four horizontal values, followed by a slash
/
and then the four vertical values, like so:
border-radius: 8px 8px 8px 8px / 20px 20px 20px 20px;
Or, because those values are repeating, an even shorter way would be to write
border-radius: 8px / 20px;
Border Images
If none of the border styles covered so far takes your fancy, CSS Level 3 introduces border images, which allow you
to use your own images in place of the basic styles described previously. Border images are unfortunately at various
