<line-width> CSS type - CSS

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. At the default page zoom it is an integer number of device pixels. While it can be as large as 1px, depending on the device, it will generally be 0.3px to 0.5px.
thin: Same as 1px.
medium: Same as 3px.
thick: Same as 5px.

Formal syntax

<line-width> = 
  <length [0,∞]>  |
  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.

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;
  }
}

Results

Specifications

Specification
CSS Backgrounds and Borders Module Level 3 # typedef-line-width

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content

`<line-width>` CSS type