border-width

Anonymous contributor's avatar
Anonymous contributor
Published Jun 28, 2021Updated Oct 21, 2023
Contribute to Docs

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;

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;
}

The following image demonstrates the code block above:

CSS border-top Example 1

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;
}

The following image demonstrates the code block above:

CSS border-top Example 2

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;
}

The following image demonstrates the code block above:

CSS border-top Example 3

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;
}

The following image demonstrates the code block above:

CSS border-top Example 4

All contributors

Contribute to Docs

Learn CSS on Codecademy