CSS Border-Width Property

The border-width property defines the width of the border. The value can be "thin," "medium," "thick," or a numerical width. If the numerical width is set to 0, no border will appear even if the border-style property is set.

CSS Declaration	Output
border-width: 9px; border-style: solid;	Border Width 9px
border-width: thin; border-style: solid;	Border Width Medium
border-width: medium; border-style: solid;	Border Width Medium
border-width: thick; border-style: solid;	Border Width Medium

The default value for border-width is "medium."

The border-width property itself is a short hand for the following properties:

• border-left-width
• border-right-width
• border-top-width
• border-bottom-width

There can be one, two, three, or four values set for the border-width property. The rules are as follows:

• one value: the width applies to all four borders.
• two values: the first width applies to the top border and the bottom border, and the second width applies to the left border and the right border.
• three values: the first width applies to the top border, the second width applies to the left border and the right border, and the third width applies to the bottom border.
• four values: the first width applies to the top border, the second width applies to the right border, the third width applies to the bottom border, and the fourth width applies to the left border.

Example 1: Single border width

CSS Declaration

border-style: solid; border-width: 10px;

results in the following:

In Example 1, the border width for all four sides is set to 10px.

Example 2: Multiple border widths

CSS Declaration

border-style: solid; border-width: 10px medium 15px 1px;

results in the following:

In Example 2, the width for the top border is set to 10px, the width for the right border is set to "medium," the width for the bottom border is set to 15px, and the width of the left border is set to 1px.