CSS border-width Property

Definition and Usage

The border-width property is a shorthand that sets the thickness of an element’s border. It covers border-top-width, border-right-width, border-bottom-width, and border-left-width.

Use a keyword (thin, medium, thick) or a length such as 2px. One to four values control which sides share a thickness. It applies to all elements, including ::first-letter, and is not inherited. A width does nothing useful until border-style is a visible style such as solid.

CSS Syntax

Use one to four non-negative lengths or keywords. One value sets every side; four values go top, right, bottom, left.

Property Values

How to Use border-width

Set a visible style first, then choose how thick each side should be.

1. Set border-style to something visible, such as solid.
2. Set border-width to a keyword or length. Use one value for every side, or more values when sides differ.
3. Optionally set border-color, or use the border shorthand for width, style, and color together.
4. Prefer side longhands such as border-top-width when only one edge must change.

Live Preview

The box already has a solid blue border. Change only border-width.

CSS Examples

Each snippet focuses on border-width. Style and color are only there so the line can show. Use Try It Yourself for a live editor.

<style>
  div {
    border-width: 4px;
    border-style: solid;
    border-color: #2563eb;
  }
</style>

<div>4px on all sides</div>

<style>
  div {
    border-width: thick;
    border-style: solid;
    border-color: #2563eb;
  }
</style>

<div>Thick border</div>

<style>
  div {
    border-width: 2px 8px;
    border-style: solid;
    border-color: #2563eb;
  }
</style>

<div>Thin top/bottom, thick sides</div>

Key Takeaways