CSS border-width Property

CSS `border-width` Property

The border-width property in CSS defines the thickness of an element's borders. It is used to control the size of the borders around an element. This property is shorthand for setting the width of the top, right, bottom, and left borders individually or collectively.

1. Syntax

selector {
  border-width: value;
}

Value	Description
`length`	Specifies the border width as a fixed value (e.g., `px`, `em`, `%`, etc.).
`thin`	Sets the border to a thin width (browser-dependent, but typically around 1px).
`medium`	Sets the border to a medium width (usually 3px).
`thick`	Sets the border to a thick width (usually 5px).
`inherit`	Inherits the border width from the parent element.

2. Example – Setting a Uniform Border Width

div {
  border-width: 5px;
  border-style: solid;
  border-color: #333;
}

<div>
  This div has a solid border with a width of 5px.
</div>

✅ The <div> will have 5px thick borders on all sides.

3. Example – Setting Individual Border Widths

You can set different border widths for each side of the element (top, right, bottom, left).

div {
  border-top-width: 5px;
  border-right-width: 10px;
  border-bottom-width: 15px;
  border-left-width: 20px;
  border-style: solid;
  border-color: #333;
}

<div>
  This div has different border widths for each side.
</div>

✅ The <div> will have different border thicknesses on each side:

5px top
10px right
15px bottom
20px left

4. Example – Using Shorthand for Border Width

You can also use the shorthand border-width property to set the widths for all sides at once:

div {
  border-width: 10px 5px 15px 20px;
  border-style: solid;
  border-color: #333;
}

10px – Top border
5px – Right border
15px – Bottom border
20px – Left border

5. Example – Using `thin`, `medium`, and `thick`

div {
  border-width: thin;
  border-style: solid;
  border-color: #333;
}

✅ The <div> will have a thin border, which is typically around 1px.

6. Best Practices

✔ Use border-width with the border-style property. Without a border-style (such as solid, dashed, or dotted), the border will not be visible.
✔ When using border-width: thin, medium, or thick, it's useful for consistent design but lacks precision. For more control, use px, em, or rem.
✔ Use shorthand border-width for efficiency when setting all sides at once. Otherwise, customize each side individually as needed.

Souy Soeng

CSS border-width Property