border-width
============

The **`border-width`** shorthand CSS property sets the width of an element's border.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `border-bottom-width`
* `border-left-width`
* `border-right-width`
* `border-top-width`
Syntax
------


```css
/\* 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).
### Values

`<line-width>`

Defines the width of the border, either as an explicit nonnegative `<length>` or a keyword. If it's a keyword, it must be one of the following values:

* `thin`
* `medium`
* `thick`


**Note:** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-top-width`: `medium`
* `border-right-width`: `medium`
* `border-bottom-width`: `medium`
* `border-left-width`: `medium`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
* `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
* `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
* `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
 |
| Animation type | as each of the properties of the shorthand:* `border-bottom-width`: a length
* `border-left-width`: a length
* `border-right-width`: a length
* `border-top-width`: a length
 |

Formal syntax
-------------
```

border-width =   
  <line-width>{1,4}    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Examples
--------

### A mix of values and lengths

#### HTML


```html
<p id="one-value">one value: 6px wide border on all 4 sides</p>
<p id="two-values">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="three-values">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="four-values">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  left
</p>
```


#### CSS


```css
#one-value {
  border: ridge #ccc;
  border-width: 6px;
}
#two-values {
  border: solid red;
  border-width: 2px 10px;
}
#three-values {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#four-values {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-width |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The border-related shorthand properties: `border`, `border-style`, `border-color`
* The border-width-related properties: `border-bottom-width`, `border-left-width`, `border-right-width`, `border-top-width`