CSS border-width

Shorthand property that sets the width for the overall border of an element or for each side individually.

Syntax

/* Keyword values */
border-width: thin;
border-width: medium;
border-width: thick;

/* <length> values */
border-width: 4px;
border-width: 1.2rem;

/* top and bottom | left and right */
border-width: 2px 1.5em;

/* top | left and right | bottom */
border-width: 1px 2em 1.5cm;

/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;

/* Global values */
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;

Copy to clipboard
Copy to clipboard

The border-width property may be specified using one, two, three, or four values.

• When one value is specified, it applies the same width to all four sides.
• When two values are specified, the first width applies to the top and bottom, the second to the left and right.
• When three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom.
• When four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise).

Example 1

Set all borders of the h1 element to medium width:

h1 {
  border-color: green;
  border-style: dashed;
  border-width: medium;
}

Copy to clipboard
Copy to clipboard

The following image demonstrates the code block above:

Example 2

Set the width of the border top and bottom to be 4px and left and right to 2px:

h1 {
  border-color: green;
  border-style: dashed;
  border-width: 4px 2px;
}

Copy to clipboard
Copy to clipboard

The following image demonstrates the code block above:

Example 3

Set the width of the border top to 10px, right and left to medium and bottom to thick:

h1 {
  border-color: green;
  border-style: dashed;
  border-width: 10px medium thick;
}

Copy to clipboard
Copy to clipboard

The following image demonstrates the code block above:

Example 4

Set the width of the border top to 10px, right to thin, left to 20px and bottom to thick:

h1 {
  border-color: green;
  border-style: dashed;
  border-width: 10px thin 20px thick;
}

Copy to clipboard
Copy to clipboard

The following image demonstrates the code block above: