Adding Borders and Drop Shadows - Beginning CSS3 - page 191

#box1 {
border-radius: 20% 10% 40% / 15% 30%;
}
#box2 {
border-top-left-radius: 20% 15%;
border-top-right-radius: 10% 30%;
border-bottom-right-radius: 40% 15%;
border-bottom-left-radius: 10% 30%;
}

■ You might find it easier to create rounded corners using one of the many free border-radius generators
online, such as those at http://border-radius.com/ or http://css3gen.com/border-radius/ .

Tip

Using border-radius With Background Images
When you apply border-radius to an element that has a background image, the image is clipped by the curve,
and the parent element's background shows through. For example, in radius_bg_image.html, the following style
rule adds a background image to a <div> and applies a 50% curve to all corners:
#photo {
/* Other styles omitted */
background-image: url(images/weaver.jpg);
background-repeat: no-repeat;
border-radius: 50%;
}

As Figure 9-9 shows, the rounded corners are also applied to the background image. Setting border-radius
to 50% on an element that has one dimension greater than the other produces an oval shape.

Figure 9-9. Rounded corners also affect background images