| You can create a border around an element and then set its thickness, style, and color. If you've specified any padding (see page 176) the border encloses both the padding and the contents of the element. To define the border-style: Type border-style: type, where type is none, dotted, dashed, solid, double, groove, ridge, inset, or outset. Figure 11.44. When you make a link out of an img element, the image is displayed with a blue border by default in most browsers. In this example, it's easier to remove the border from the img element than from a elements, though we could do that, too. 
To set the width of the border: Type border-width: n, where n is the desired width, including abbreviated units (for example, 4px). To set the color of the border: Type border-color: color, where color is a color name or rgb color (see page 126 and the inside back cover). Figure 11.45. Notice that since a right border is applied to the entry div and not the main div, it stops and starts for each entry. Also, now that the photos don't have that annoying default border, there is enough space between them and the text. 
To set one or more border properties at once with a shortcut: 1. | Type border.
| 2. | If desired, type -top, -right, -bottom, or -left to limit the effect to a single side.
| 3. | If desired, type -property, where property is one of style, width, or color, to limit the effect to a single property.
| 4. | Type :.
| 5. | Type the appropriate values (as described in the first three techniques above). If you've skipped step 3, you can specify any or all of the three types of border properties (e.g., border:1px solid or border-right:2px dashed green). If you have specified a property type in step 3, use an accepted value for just that property (e.g., border-right-style:dotted).
|
Figure 11.46. The footer has a top border that is the same color but that is dotted instead of dashed. 
 Tips
Borders are not inherited. The individual border properties (border-width, border-style, and border-color) can have from one to four values. If you use one value, it is applied to all four sides. If you use two, the first is used for the top and bottom, and the second for the right and left. If you use three, the first is used for the top, the second for the right and left, and the third is used for the bottom. And if you use four, they are applied to the top, right, bottom, and left, in clockwise order. Figure 11.47. In this mini-example, I set the padding and default border for each paragraph. Then for the first paragraph, I set the border width for all four sides, and then the style for each side. For the four remaining paragraphs, it was easier to repeat the 10px then to separate the style and color into two separate properties.  You must define at least the style for a border to display. If there's no style, there will be no border. The default is none. If you use a shortcut, like border or border-left (etc.), the properties you don't give values for are set to their defaults. So border: 1px black means border: 1 px black none, which means you won't get a border (even if you specified a style earlier with border-style). The default color is the value of the element's color property (see page 160). The width can also be expressed in generic terms: thin, medium, and thick. The default is medium. IE (up to and including version 7) cannot display very dark two-tone border styles like groove, ridge, outset, and inset. They come out solid.18 The border property can be used for tables and their cells. For more details, consult Adding a Border on page 230. Frankly, I think someone went a bit over the top in thinking up different ways to set the border properties.
Figure 11.48. Firefox for Macintosh is shown on the left, IE 7 for Windows is on the right. The styles are very similarly displayed, but not exactly the same. Note, for example, how IE's dots are actually round and how Firefox's shading is lighter and more pronounced. 
|
