# 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

`selector { 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:

Number | Description
--- | ---
`1` | Type for all sides at once.
`2` | The first value is for top and bottom, the second is for left and right borders.
`3` | The first value is for top, the second is for left and right borders, the third is for bottom.
`4` | The first value is for top border, the second is for right, the third is for bottom, the fourth is for left border.

## Example

We set a border to be one pixel width:

`<div id="elem"></div>` `#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:

`<div id="elem"></div>` `#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`:

`<div id="elem"></div>` `#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`:

`<div id="elem"></div>` `#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`:

`<div id="elem"></div>` `#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:

`<div id="elem"></div>` `#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:

`<div id="elem"></div>` `#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:

`<div id="elem"></div>` `#elem { border-width: thick; border-style: solid; border-color: black; width: 300px; height: 100px; }`

:

## Example

Let's set different borders for different sides:

`<div id="elem"></div>` `#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

- the `border-style` property
  that specifies a border style
- the `border-color` property
  which sets a border color
- the `border` property
  that is the shorthand property for a border

← →
↑
en ru