Creating Borders

You can also create borders for elements using CSS, setting the border style, border width, border color , and so on. Here are the border properties that are available:

• border-bottom-width Sets the width of the bottom of the border. Set this to an absolute measurement, such as 10px for 10 pixels, or 4pt for 4 points; or use a keyword, as in thin , medium , or thick .

• border-color Specifies the color you want the border to be displayed in (use a predefined color or a color triplet ). Setting this property to one value sets the color of the whole border; two values set the top and bottom borders to the first value and the right and left borders to the second; four values set the color of all border parts in order: top, right, bottom, and left.

• border-left-width Sets the width of the left edge of the border; set to an absolute measurement like 10px for 10 pixels, or 4pt for four points, or a keyword: thin , medium , or thick .

• border-right-width Sets the width of the right edge of the border. Set this to an absolute measurement, such as 10px for 10 pixels, or 4pt for 4 points; or use a keyword, as in thin , medium , or thick .

• border-style Sets the border style. Possible values include dotted , dashed , solid , double , groove , ridge , inset , and outset .

• border-top-width Sets the width of the top of the border. Set this to an absolute measurement, such as 10px for 10 pixels, or 4pt for 4 points; or use a keyword, as in thin , medium , or thick .

You also can use five shorthand border properties:

• border-top Sets the style of the top border

• border-right Sets the style of the right border

• border-bottom Sets the style of the bottom border

• border-left Sets the style of the left border

• border Sets the border style all at once

You set the shorthand properties to a width, style, and color all at once like this:

 P {border 10pt solid cyan} 

Here's an example. In this case, I'm adding a border to the <SECTION> element in our XML document:

Listing ch09_17.css

 TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center}  SECTION {display: block; font-size: 16pt; font-weight: bold;   text-align: center; font-style: italic; border-style: solid}  P {display:block} 

You can view the results in Figure 9-11, where you can see the solid border around the <SECTION> element. (I might note in passing that it's a good thing we selected a solid border for this element because Internet Explorer cannot draw anything but solid borders around elements presently.)

Figure 9-11. Enclosing an element in a border.