The border-width property

The border-width property sets a border width for all sides simultaneously or separately for each side. Is the shorthand property for the border-left-width, border-right-width, border-top-width, border-bottom-width properties.

The property value is any size units, except percentages, or the keywords thin (border of 2 pixels), medium (border of 4 pixels) or thick (border of 6 pixels). Default value: medium.

Syntax

cssselector {
  border-width: 1, 2, 3 or 4 values;
}

Number of values

The property can take 1, 2, 3 or 4 values, separated by a space:

Example

We set a border to be one pixel width:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Example

Let's set a border with a width of 4 pixels:

html<div id="elem"></div>

css#elem {
  border-width: 4px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Example

Let's set the width of a top and bottom borders to 1px, and a right and left ones to 4px:

html<div id="elem"></div>

css#elem {
  border-width: 1px 4px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Example

Let's set the width of a top border to 1px, a right and left ones to 4px, and a bottom to 6px:

html<div id="elem"></div>

css#elem {
  border-width: 1px 4px 6px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Example

We set the width of a top border to 1px, a right border to 4px, a bottom border to 6px, and a left border to 8px:

html<div id="elem"></div>

css#elem {
  border-width: 1px 4px 6px 8px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Example

Let's set a border width using the thin keyword:

html<div id="elem"></div>

css#elem {
  border-width: thin;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Example

Let's set a border width using the medium keyword:

html<div id="elem"></div>

css#elem {
  border-width: medium;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Example

Let's set a border width using the thick keyword:

html<div id="elem"></div>

css#elem {
  border-width: thick;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Example

Let's set different borders for different sides:

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

See also