HTML and CSS Reference
In-Depth Information
Chapter 9
Adding Borders and Drop Shadows
All browsers support basic borders, but the CSS3 Backgrounds and Borders module offers a wider range of
options. In the past, the only way to add rounded corners or drop shadows to an element was by nesting it in
other elements and adding background images. In a CSS3-compliant browser, no images are involved. It's all
done with a simple style rule. For more ambitious decorative borders, CSS3 makes it possible to use images
without nested elements. The CSS3 features are widely supported, except in IE 8 and earlier.
In this chapter, you'll learn how to do the following:
•
Control the color, style, and width of borders on different sides of an element
•
Add translucent borders with a fallback for older browsers
•
Get rid of borders around image links and image maps
•
Prevent borders and backgrounds from running under floated elements
•
Add rounded corners to an element
•
Create drop shadows and inset shadows
•
Use an image to create a decorative border
•
Remove the focus rectangle from links without compromising accessibility
Creating Basic Borders
Because CSS gives you control over the color, style, and width of each side of an element, there are no fewer
than 20 properties just for basic borders. The reason there are so many is to reduce the amount of typing. Most
properties are shorthand versions. Once you know the basic principles, you can choose whichever best suits your
needs. However, let's start by looking at the individual properties.
Setting Individual Border Properties
Individual properties allow you to set each aspect of an element's border(s) independently. Table
9-1
lists the
individual border properties that are supported by all browsers in current use.
