EFFECTS - CSS: Professional Techniques for Modern Layout - page 175

Also, on a history-compatibility note, this doesn't work as intended in IE6 unless you
assign an explicit width to the div . You can use pixels, ems, percentages, or whatever,
but if you stick with the default value of auto , the bottom corners won't go where
they're supposed to go. It's a small annoyance, but one worth knowing about. IE6 also
didn't support PNG transparencies, so you'll also have to hack in a substitute GIF or else
just hide this stuf from IE6 altogether. h e IE6 users won't suf er much from not having
rounded corners on the page anyway.

CSS 3 ROUNDED CORNERS
h ese really couldn't be any easier, at least once you grasp how the curves are sized. h e
advantage is that they're purely CSS-driven, requiring no extra markup, and they don't
require a l at-color background surrounding the rounded element. h e downside is their
somewhat limited support—as of this writing, no version of Internet Explorer supports
them, although support has been promised for IE9—and the need for vendor prei xes.

First, refer to Figure 5-22, found in the preceding section. To create that same basic
ef ect using CSS 3, you would really need just this:

.rounded { background : #FFF ; border : 2px solid #000 ;
border-radius : 20px ;}

h at's it! Except that won't work in almost any browser, because border-radius isn't
i nalized yet. To make it work in supporting browsers, which means Safari/Chrome and
Firefox , and so on, you have to add a vendor prei x—twice, in fact (see also Figure
5-24). And then leave in the unprei xed version so that it will be there when browsers
support it.

177

.rounded { background : #FFF ; border : 2px solid #000 ;
-moz-border-radius : 20px ;
-webkit-border-radius : 20px ;
border-radius : 20px ;}

Figure 5-24: Very easily rounded corners.