css type

`<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

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

`∞]> | hairline | thin | medium | thick“

Examples

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.

<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.

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.