CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 269

Rounded corners
The ability to have a property that creates rounded corners on an element is a panacea for
web design. This used to be a painful process of slicing up images and placing them into
a grid of div elements so the four corners could be isolated. Yuck! The new border-
radius property allows borders to be rounded. Borders can be rounded all at once,
individually, or even in a nonuniform fashion. Giving the property one length value will
set all four corners to that value:
border-radius:20px; /* round all corners by 20 pixels */
Giving the property four values will set the rounding on each of the four corners:
border-radius:100px 50px 25px 0px; /* each corner is roun-
ded by a different amount */
Using a forward slash between the values will allow different values to be specified
for rounding each side of a corner, leading to a nonuniform corner:
border-radius: 100px / 20px; /* round one side of the corner
more than the other side */
The forward slash in the preceding code breaks the rounding into two values; the first
value is the horizontal rounding amount, and the second value is the vertical rounding
amount.
The results of the previous three properties applied to an empty div with a back-
ground color look like Figure 6-21 .
Figure 6-21. Many different shapes can be created by using the border-radius property.
Drop shadows
The box-shadow property can be used to create a drop shadow around the box.
The values it takes are the horizontal distance of the shadow, the vertical distance, the