CSS <line-width> Data Type

The CSS <line-width> data type represents the thickness of a line, such as a border or outline. It accepts the keywords thin, medium, and thick, or a non-negative <length> value.

Syntax

The <line-width> data type accepts one of three keyword values or a non-negative <length>:

<line-width> = <length [0,∞]> | thin | medium | thick

Examples include:

thin
medium
thick
1px
0.25rem
0

Keyword Values

The thin, medium, and thick keywords allow the browser to determine the exact line width. Their precise thickness is implementation-dependent, but the values maintain the relationship thin ≤ medium ≤ thick.

Value	Description
`thin`	Displays a relatively thin line.
`medium`	Displays a medium-width line and is the initial border width.
`thick`	Displays a relatively thick line.

Length Values

A <length> value provides an explicit line width. The value must be non-negative and can use CSS length units such as px, em, or rem.

1px
3px
0.2em
0.25rem

Negative line widths are invalid.

Zero Values

A line width of 0 is valid and produces a line with no visible thickness. As with other zero lengths, the value can be written without a unit.

.example {
  border-width: 0;
}

<line-width> Example

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

.thin {
  border: thin solid #0088cc;
}
.medium {
  border: medium solid #0088cc;
}
.thick {
  border: thick solid #0088cc;
}
.custom {
  border: 8px solid #0088cc;
}

Browser Result

thin

medium

thick

8px

The exact widths represented by thin, medium, and thick are determined by the browser, while a length such as 8px specifies an explicit width.

The <line-width> data type is used by properties that control border, outline, and column rule widths, including:

Specifications

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

CSS <line-width> Data Type