Creating Page Layouts with CSS - HTML, CSS, and Dynamic HTML - page 268

Figure 4-41 Creating an elongated corner

150px

border-radius: 150px/80px;

To apply an elongated corner to a single corner, you do not include the slash between
the horizontal and vertical radii. For example, to create an elongated bottom-left corner,
you could apply the style

border-bottom-left-radius: 150px 80px;
which would set the horizontal radius of the bottom-left corner to 150 pixels and the
vertical radius to 80 pixels.
Rounded and elongated corners do not clip element content. If the content of the ele-
ment extends into the corner, it still will be displayed as part of the background. Because
this is often unsightly, you should avoid heavily rounded or elongated corners unless you
can be sure they will not obscure or distract from the element content.

Browser Extensions to Rounded Corners
Rounded corners were fi rst introduced in both the WebKit and Mozilla browser exten-
sions. The syntax is largely the same as that adopted by CSS3 except when applied to
individual corners. Figure 4-42 compares the syntax of three versions of the rounded
corner style.

Figure 4-42 Browser extensions to the rounded corner styles

CSS3 Mozilla WebKit

border-radius -moz-border-radius -webkit-border-radius

border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius

border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius

border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius

border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius

For example, you would use progressive enhancement to set the radius of the top-right
corner to 15 pixels with the following style values:

-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
border-top-right-radius: 15px;