border-width

Sets the thickness of a border.

Initial value: medium
Inherited: No
Animatable: yes, as a length
Applies to: all elements
JavaScript: element.style.borderWidth = "4px"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.tab.active {
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #a78bfa;
}

Example HTML

<nav class="stage" style="display: flex; gap: 16px;">
  <span class="tab active" style="padding-bottom: 4px">Description</span>
  <span class="tab" style="padding-bottom: 4px">Tasks</span>
  <span class="tab" style="padding-bottom: 4px">Reviews</span>
</nav>

Preview

Definition and usage

The border-width property sets the thickness of the border line. It accepts lengths or the thin, medium, and thick keywords, whose exact thickness depends on the browser.

Like other edge shorthands, it takes one to four values: for all sides, for vertical and horizontal, or separately for each edge.

The width is only visible when the border has a style other than none and hidden.

Syntax

border-width: thin | medium | thick | <length> (1-4 values);

Values

thin
A thin line, usually 1px.
medium
A medium line, usually 3px. The default value.
thick
A thick line, usually 5px.
2px 8px
vertical horizontal
Thin on top and bottom, thick on the sides.

Value	Type	Description
thin		A thin line, usually 1px.
medium		A medium line, usually 3px. The default value.
thick		A thick line, usually 5px.
2px 8px	vertical horizontal	Thin on top and bottom, thick on the sides.

Values in practice

thin

A thin line, usually 1px.

.demo { border-width: thin; }

medium

A medium line, usually 3px. The default value.

.demo { border-width: medium; }

thick

A thick line, usually 5px.

.demo { border-width: thick; }

2px 8px

Thin on top and bottom, thick on the sides.

.demo { border-width: 2px 8px; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

The thin, medium, and thick keywords look slightly different across browsers. Use pixels for precision.
Width alone does nothing without border-style.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course