B.18. border-style

The border-style property sets the style of the border surrounding the selected element(s).

The style for each side may be set individually, using the border-bottom-style, border-left-style, border-right-style, and border-top-style properties.

Inherited: No

B.18.1. Value

The CSS specifications provide a set of constants for a range of border styles. Table B-3 shows the available constants and the browsers that support them.

You can specify from one to four different style values to specify different styles for each side of the element, as shown in Table B-2. Note that Netscape 4 supports only a single border style value.

The difference between none and hidden, though not visible in Table B-3, arises in HTML tables where the border-collapse property is set to collapse. When two cells share a border and one of them specifies a style of none for the border, the other cell's border style takes precedence and the border is drawn.

The hidden border style, however, takes precedence over all other border styles; therefore, if the first cell in the previous example specified a style of hidden, the other cell's border style would be ignored and no border would be drawn. See the CSS2 Specification for a full discussion of table border conflict resolution.

Initial value: none

Table B-3. CSS border style constants

Constant	CSS Spec	Supporting Browsers	Sample
double	CSS1	All CSS Browsers
groove	CSS1	All CSS Browsers
inset	CSS1	All CSS Browsers
none	CSS1	All CSS Browsers
outset	CSS1	All CSS Browsers
ridge	CSS1	All CSS Browsers
solid	CSS1	All CSS Browsers
dashed	CSS1	Netscape 6, Mozilla, IE 5.5/Win, IE 4/Mac
dotted	CSS1	Netscape 6, Mozilla, IE 5.5/Win, IE 4/Mac
hidden	CSS2	Netscape 6, Mozilla, IE 5.5/Win, IE 4/Mac

B.18.2. Compatibility

CSS Version: 1

Works in all CSS-compatible browsers, including Internet Explorer 4 and Netscape 4. For specific compatibility information, see above.

Note that Netscape 4 defines a default border width of 0, so in addition to a border-style, you must also specify a border-width for the border to appear in that browser.

B.18.3. Example

This style rule makes any element of class fauxbutton look like a button by giving it an outset border style, a light grey background, and black text:

.fauxbutton {
  border-style: outset;
  border-color: grey;
  border-width: medium;
  background: lightgrey;
  color: black;
}