CSS <line-style> Data Type

The CSS <line-style> data type represents the style of a line, such as a border or outline. It includes ten keyword values that produce solid, dashed, dotted, double, three-dimensional, or hidden lines.

Syntax

The <line-style> data type accepts one of ten keyword values:

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Line Style Values

Value	Description
`none`	Displays no line. For borders, the computed border width is zero.
`hidden`	Displays no line. It behaves like `none` except when resolving conflicting borders in a collapsed table.
`dotted`	Displays a series of rounded dots.
`dashed`	Displays a series of short line segments.
`solid`	Displays a single solid line.
`double`	Displays two parallel solid lines with space between them.
`groove`	Displays a line that appears carved into the surface.
`ridge`	Displays a line that appears raised from the surface.
`inset`	Displays a line that makes the bordered area appear embedded.
`outset`	Displays a line that makes the bordered area appear raised.

Three-dimensional Line Styles

The groove, ridge, inset, and outset values create three-dimensional effects by adjusting the displayed line colors according to the specified line color.

The exact appearance can vary depending on the browser, line color, and surrounding background.

<line-style> Example

The following borders use the same width and color while changing only the <line-style> value:

.solid {
  border: 5px solid #0088cc;
}
.dotted {
  border: 5px dotted #0088cc;
}
.dashed {
  border: 5px dashed #0088cc;
}
.double {
  border: 5px double #0088cc;
}

Browser Result

solid

dotted

dashed

double

The <line-style> data type is used by properties that control the style of borders, outlines, and similar lines, including:

Specifications

The <line-style> data type is defined in the CSS Backgrounds and Borders Module Level 3 .

CSS <line-style> Data Type