HTML and CSS Reference
In-Depth Information
Table 9-1. Individual Border Properties Supported by All Browsers
Property
Initial Value
Description
border-top-color
currentColor
Sets the color for the top border.
border-right-color
currentColor
Sets the color for the right border
border-bottom-color
currentColor
Sets the color for the bottom border.
border-left-color
currentColor
Sets the color for the left border
border-top-style
none
Sets the style for the top border.
border-right-style
none
Sets the style for the right border.
border-bottom-style
none
Sets the style for the bottom border.
border-left-style
none
Sets the style for the left border.
border-top-width
medium
Sets the width of the top border.
border-right-width
medium
Sets the width of the right border.
border-bottom-width
medium
Sets the width of the bottom border.
border-left-width
medium
Sets the width of the left border.
The color properties accept any color value, but for cross-browser compatibility, it's best to use hexadecimal
notation, a color keyword, or rgb() . If you specify a color with alpha transparency using rgba() or hsla() , IE 6-8
ignore the color and use the text color instead. To specify an opaque fallback color for older browsers, you need
to use shorthand properties as described later in this chapter. Browsers also use the text color if you don't set a
color for the border.
The style properties accept any of the following keywords: none , hidden , dotted , dashed , solid , double ,
groove , ridge , inset , or outset . Although none is the default value, it's also useful for suppressing an unwanted
border. he hidden value is used with table borders and is discussed in Chapter 14.
Using solid and double produces consistent results in all browsers, but there are minor differences between
browsers and operating systems in how the other styles are rendered. There is no way to control the spacing of
the dots and dashes, but browsers normally create symmetrical corners for dotted and dashed . Examples of the
styles are in border_styles.html in the ch09 folder. Figure 9-1 shows the page rendered in Chrome in Windows 7.
Figure 9-1. Examples of different border styles as rendered in Chrome
 
 
Search WWH ::




Custom Search