Graphics Programs Reference
In-Depth Information
When IE supports rounded corners, will you also have to declare -ms-border-radius ?
Possibly. It depends on when border-radius is declared stable enough to remove vendor
prei xes and when IE adds its support.
h e advantage with this approach is that you don't have to muck around with the extra
HTML, CSS, and image that the preceding technique required. You are also really rounding
the corners of the element, so the background of the page just shows past the rounded
corners, whether it's a l at color, a gradient, or full-on plaid.
You can alter the shape of the curves by using two values (see Figure 5-25). For example:
.rounded { background : #FFF ; border : 2px solid #000 ;
-moz-border-radius : 20px / 60px ;
border-radius : 20px / 60px ;}
178
Figure 5-25: Oval-rounded corners.
Note how the corners are now not perfect circular arcs, but are instead elliptical in nature.
h at's the ef ect of having two slash-separated values. h e slash is important: If you leave it
out, you'll be setting corners to dif ering sizes, but each one will use a circular arc. (I dropped
the -webkit- line because, as of this writing, WebKit browsers didn't support that value
pattern.)
Suppose you did just remove the slashes.
.rounded { background : #FFF ; border : 2px solid #000 ;
-moz-border-radius : 20px 60px ;
border-radius : 20px 60px ;}
h e result is shown in Figure 5-26.
 
Search WWH ::




Custom Search