CSS border-width Property

What You’ll Learn

The border-width property sets how thick the borders are on an element. You can use one value for all sides or up to four values for top, right, bottom, and left.

Definition and Usage

The border-width CSS property controls the thickness of the border around an element. It applies to all four sides and is essential for defining how prominent a box, card, or frame appears on the page.

By choosing keyword values like thin and thick, or exact lengths such as 2px and 5px, you can fine-tune visual weight for cards, form fields, callouts, and layout dividers.

📝 Syntax

The syntax for border-width accepts keyword values or length units:

selector {
  border-width: <length> | thin | medium | thick;
}

Basic Example

.box {
  border-width: 5px;
  border-style: solid;
  border-color: #ff5733;
}

The value can be a keyword such as thin or a length such as 5px, 0.25em, or 1rem.

Syntax Rules

• The initial value is medium, typically around 3 to 4 pixels.
• One value applies to all four sides; up to four values target top, right, bottom, and left.
• Keywords: thin, medium, and thick.
• Length values use units like px, em, or rem.
• Pair with border-style and border-color, or use the border shorthand.

Default Value

The default value of border-width is medium, which typically corresponds to a width of around 3 to 4 pixels depending on the browser’s default settings.

You can pass one to four values to set the same thickness on every side or assign a different width to each edge.

💎 Property Values

The border-width property accepts keyword values and length units.

One to Four Values

border-width follows the same shorthand pattern as margin and padding. One value styles every side; up to four values target top, right, bottom, and left in that order.

• One value — applies to all four sides.
• Two values — first value for top and bottom, second for right and left.
• Three values — top, right/left, bottom.
• Four values — top, right, bottom, left.

border-width vs Side Longhands vs border

Examples Gallery

Try border-width with pixel lengths, keyword sizes, four-value shorthand, and width comparisons.

<style>
  .box {
    border-style: solid;
    border-width: 5px;
    border-color: #ff5733;
    padding: 10px;
  }
</style>

<h1>Box with Custom Border Width</h1>
<div class="box">
  This box has a 5px wide border.
</div>

.thin {
  border-width: thin;
  border-style: solid;
  border-color: black;
  padding: 0.75rem;
}
.medium {
  border-width: medium;
  border-style: solid;
  border-color: black;
  padding: 0.75rem;
}
.thick {
  border-width: thick;
  border-style: solid;
  border-color: black;
  padding: 0.75rem;
}

.shorthand-box {
  border-width: 1px 4px 8px 2px;
  border-style: solid;
  border-color: #2563eb;
  padding: 1rem;
  max-width: 16rem;
}

.w-1 {
  border: 1px solid #64748b;
  padding: 0.75rem;
}
.w-4 {
  border-width: 4px;
  border-style: solid;
  border-color: #2563eb;
  padding: 0.75rem;
}
.w-8 {
  border: 8px solid #dc2626;
  padding: 0.75rem;
}

💡 Best Practices