HTML and CSS Reference
In-Depth Information
Figure 4-37
Hover style for the vertical navigation list
bottom border
added to each
hypertext link
hover effect changes the
background color to a
semi-transparent white
Vaclav Volrab/Shutterstock.com
To create this effect, you'll work with the CSS border styles.
Setting Border Width and Color
CSS supports several style properties to format the border around each element. As with
the margin and padding styles, you can apply a style to the top, right, bottom, or left bor-
der, or to all borders at once. To defi ne the thickness of a border, use the style properties
border-top-width: width ;
border-right-width: width ;
border-bottom-width: width ;
border-left-width: width ;
where width is defi ned as a percentage or as one of the CSS units of measure. Border
widths also can be expressed using the keywords thin , medium , or thick ; the exact
application of these keywords depends on the browser. You also can defi ne the border
thickness using the following single style property:
border-width: top right bottom left ;
As with the margin and padding properties, if you enter one value, it's applied to all
four borders; two values set the width of the top/bottom and left/right borders, respec-
tively; and three values are applied to the top, left/right, and bottom borders, in that order.
You set the border color with the style properties
border-top-color: color ;
border-right-color: color ;
border-bottom-color: color ;
border-left-color: color ;
border-color: top right bottom left ;
Search WWH ::




Custom Search