HTML and CSS Reference
In-Depth Information
The other important difference is that the WebKit extension separates horizontal and
vertical radii with a space rather than with a slash. Thus, to create elongated corners of
45 pixels wide and 15 pixels high, you would enter the following style values:
-moz-border-radius: 45px/15px;
-webkit-border-radius: 45px 15px;
border-radius: 45px/15px;
The current versions of both Firefox and Safari have adopted the CSS3 standard. You
need to use the browser extension only if you have to support earlier versions of those
browsers. Internet Explorer does not support rounded corners until IE9. There are work-
arounds for Internet Explorer users involving nested
div
elements with background
images displaying rounded corners, but they are diffi cult and cumbersome to create. As
long as the rounded corners are used only to enhance your page's appearance and are
not an essential part of understanding your page's content, you should feel free to use the
CSS3 styles even with browsers that don't support them.
Modify your style sheet now to add 30-pixel rounded corners to the president's mes-
sage box.
To create rounded corners:
◗
1.
Return to the
cp_styles.css
file in your text editor.
◗
2.
Within the style rule for the
#president
selector, add the following style proper-
ties as shown in Figure 4-43:
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
Figure 4-43
Specifying the border radius
sets rounded
corner
s
w
ith a
radius of 30 pixels
◗
3.
Save your changes to the file and then reload
cycle.htm
in your Web browser.
As shown in Figure 4-44, the president's message should now display rounded
corners.
