border-styleNN 4 IE 4 CSS 1

Inherited: No

This is a shortcut attribute that lets you set multiple border edges to the same or different style. Navigator 4 allows only a single value, which applies to all four edges. For Internet Explorer and Netscape 6, you may supply one to four space-delimited border style values. The number of values determines which sides receive the assigned style.

 
CSS Syntax
  
border-style: borderStyle {1,4}
 
Value

Style values are constants that are associated with specific ways of rendering border lines. Not all browsers recognize all of the values in the CSS recommendation. Style support is as follows.

The precise manner in which browsers interpret the definitions of the style values is far from universal. Figure 11-1 shows a gallery of all styles as rendered by Internet Explorer 6 for Windows, Explorer 5 for Macintosh, and Netscape 6. Do not expect the exact same look in all browsers.

For Navigator 4, you may apply one style value only. In Internet Explorer and Netscape 6, this attribute accepts one, two, three, or four space-delimited borderStyle values, depending on how many and which borders you want to set with specific styles. Value quantities and positions are interpreted as shown in the following table.

ValueNNIE/WindowsIE/MacCSS
dashed65.541
dotted65.541
double4441
groove4441
hidden6n/a42
inset4441
none4441
outset4441
ridge4441
solid4441
 
Number of valuesEffect
1All four borders set to value
2Top and bottom borders set to the first value, right and left borders set to the second value
3Top border set to first value, right and left borders set to second value, bottom border set to third value
4Top, right, bottom, and left borders set, respectively
 
Initial Value

none
 
Example
  
h1 {border-style: ridge; border-width: 3px}
div {border-style: solid double; border-width: 4px}
 
Applies To

All elements, but only block and replaced elements in IE 4 and 5 for Windows.

 
Object Model Reference
  
[window.]document.getElementById("elementID").style.borderStyle