`<line-width>` CSS type

The <line-width> enumerated value type represents the length or keyword value that defines the width of a line, or the lack of a line. The <line-width> keyword values are used in the following longhand and shorthand properties:

Syntax

undefined

Values

The <line-width> type is specified using either <length> or a keyword:

<length>: A non-negative <length>.
hairline: Represents a "just visible" line that is less than or equal to 1px.
thin: Same as 1px.
medium: Same as 3px.
thick: Same as 5px.

Formal syntax

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

Examples

undefined

Defining a line width

This example demonstrates all the <line-width> keyword values, along with a <length> value.

HTML

We include five boxes within a <section> element.

html

<section>
  <div data-width="hairline">hairline</div>
  <div data-width="thin">thin</div>
  <div data-width="medium">medium</div>
  <div data-width="thick">thick</div>
  <div data-width="10px">10px</div>
</section>

CSS

We style all the elements to be identical, then set the border-width based on the element's data-width attribute.

css

section {
  display: flex;
  gap: 10px;
}
div {
  flex: 0 0 15%;
  border-style: solid;
  border-color: purple;
  text-align: center;
}
[data-width="hairline"] {
  border-width: hairline;
}

[data-width="thin"] {
  border-width: thin;
}

[data-width="medium"] {
  border-width: medium;
}

[data-width="thick"] {
  border-width: thick;
}

[data-width="10px"] {
  border-width: 10px;
}

@supports not (border-width: hairline) {
  body::before {
    content: "Your browser does not support the 'hairline' value.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
  }
}

Result

Specifications

CSS Backgrounds and Borders Module Level 3

<line-width> CSS type