Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 183

The browser support of CSS properties varies and is gradually improving. However, even the CSS 2.1 properties
gained a more or less complete and correct implementation only recently. Consequently, old browsers do not support
all properties and have incorrect implementation for many properties. This was the major reason for the huge
difference in rendering the same site under different browsers for years. With the proper, if not full, implementation of
CSS properties in modern browsers, this difference has been decreased to a minimum.
Most Common CSS3 Features and Properties
With CSS3, you can create rounded borders, add shadow to boxes, use an image as a border, and other advanced
styling without creating images in an image processing program such as Photoshop.
border-radius
With CSS3, you can add rounded borders to elements individually using the border-top-left-radius , border-top-
right-radius , border-bottom-right-radius , and border-bottom-left-radius properties (Listing 5-68), or together
with their shorthand property, border-radius (Listing 5-69).
Listing 5-68. Border Radii Set Individually for the Four Corners
div {
border: 2px solid;
border-top-left-radius: 2em;
border-top-right-radius: 1.8em;
border-bottom-right-radius: 2.2em;
border-bottom-left-radius: 1.6em;
}
The property value (the radius) can be declared in pixels, ems, or %, which defines the shape of the corners.
Listing 5-69. Identical Border Radius for All Corners
div {
border: 2px solid;
border-radius: 25px;
}
The radii values are declared in the order top-left , top-right , bottom-right , and bottom-left . If bottom-left
is omitted, it is the same as top-right . If bottom-right is omitted, it is the same as top-left . If top-right is omitted,
it is the same as top-left . If all four radii values are the same, the border-radius shorthand property should be used
with that value.
box-shadows
In CSS3, the box-shadow property is used to add shadow to divisions (Listing 5-70).
Listing 5-70. Shadow on the div Elements
div {
box-shadow: 10px 10px 5px #848484;
}