HTML and CSS Reference
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;
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