HTML and CSS Reference
In-Depth Information
All of the border styles discussed above can be combined into a single style that
defi nes each or all of the borders around the element. The syntax of these border styles is
Browsers will render a
border correctly no matter
the order in which you
specify the width , style ,
and color values.
border-top: width style color ;
border-right: width style color ;
border-bottom: width style color ;
border-left: width style color ;
border: width style color ;
where width is the thickness of the border, style is the style of the border, and color is
the border color. Thus, the style rule
h1 {border: 2px solid blue;}
adds a 2-pixel-wide solid blue border around every h1 heading.
Setting Border Styles in the Box Model
• To set the border width, use the property
border-width: width ;
where width is the thickness of the border using one of the CSS units of measure.
• To set the border color, use
border-color: color ;
where color is a color name or value.
• To set the border design, use
border-style: style ;
where style is none , solid , dashed , dotted , double , outset , inset , groove , or
ridge .
• To set all of the border options in one style, use the following:
border: width color style ;
You'll use the CSS border styles to add a bottom border to each hypertext link in the
vertical navigation list. To extend the bottom border across the complete width of the list,
you'll also change the display property of each hyperlink to block. By default, block-
level elements have a width equal to the width of their containing element unless a dif-
ferent width is set by the page design.
To add a bottom border to the hypertext links:
1. Return to the cp_styles.css file in your text editor.
2. Within the style rule for the nav.verticalNAV a selector, add the following styles
in alphabetical order within the curly braces as indicated in Figure 4-39:
border-bottom: 1px solid rgb(182, 182, 92);
display: block;
Search WWH ::

Custom Search