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.