In this section, we will learn what the border-width property is and how to use it in CSS.

Click here to run the example of border-width property.

CSS border-width Property Definition and Usage

The `border-width` property is a shorthand property and is used to set the width of borders of an element.

Basically, CSS has properties to set the width of each individual border of an element, but with this `border-width` property, we can set the width of all borders in one declaration.

Here’s the list of properties the `border-width` property covers:

• border-top-width: for setting the width of the top border.
• border-right-width: for setting the width of the right border.
• border-bottom-width: for setting the width of the bottom border.
• border-left-width: for setting the width of the left border.

CSS border-width Property Syntax

border-width: medium|thin|thick|length|initial|inherit;

border-width: value1 value2 value3 value4;

When we set 4 values for this property: the first value sets the width of the top border, the second value sets the width of the right border, the third value sets the width of the bottom border and the last value sets the width of the left border.

border-width: value1 value2 value3;

When we set 3 values for this property: the first value sets the width of the top border, the second value sets the width of the left and right borders, and the last value sets the width of the bottom border.

border-width: value1 value2;

When we set 2 values for this property: the first value sets the width of the top and bottom borders and the second value will set the width of the right and left borders.

border-width: value1;

If we set one value for this property, that will be applied to the entire borders of an element.

CSS border-width Property Value

The value we set for this property can be either:

• thin: using this value, the border will have a thickness somewhere around 1px.
• medium: using this value, the border will have a thickness around 3px.
• thick: using this value, the border will have a thickness around 5px.

Also, you can set number as the value for this property. Other than ‘%’ any CSS supported units can be used for this property.

Example: CSS border size

See the Pen CSS border size by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS border thickness

See the Pen CSS border thickness by Enjoy Tutorials (@enjoytutorials) on CodePen.