Visual Elements and Graphics - Web Development and Design Foundations with XHTML - page 123

Chapter 6. For now, let's focus on two CSS properties that can be configured for the
“box”—the border and padding properties.
The border Property. The border property configures the border, or boundary,
around an element. By default, the border has a width set to 0 and does not display.
You can set the border-width , border-color , and border-style . And there's
more—you can even configure individual settings for border-top , border-right ,
border-bottom , and border-left . You'll get some practice configuring properties for
just the top border ( border-top ) in the next Hands-On Practice.
The border-style property also offers a variety of formatting options including
inset , outset , double , groove , ridge , solid , dashed , and dotted . Be aware that
these property values are not all uniformly applied by browsers. Figure 4.2 shows how
Firefox 3 and Internet Explorer 8 render various border-style values.
Figure 4.2
Not all
border-style
properties are
rendered the same
way by popular
browsers
The CSS to configure the borders shown in Figure 4.2 uses a border-color of
#000033 , border-width of 3 pixels, and the value indicated for the border-style
property. For example, the style rule to configure the dashed border follows:
.dashedborder { border-color: #000033;
border-width: 3px;
border-style: dashed;
}
A shorthand notation allows you to configure all the border properties in one style rule
by listing the values of border-width , border-style , and border-color . An example
follows:
.dashedborder { border: 3px dashed #000033 }
The padding Property. The padding property configures empty space between the
content of the XHTML element (usually text) and the border. By default, the padding is
set to 0. If you configure a background color for an element, the color is applied to
both the padding and the content areas. You'll apply the padding property in the next
Hands-On Practice. You may want to refer to Table 4.1, which presents a description of
the CSS properties introduced in Chapter 4, as you work through the Hands-On
Practice exercises.