index.md

---
title: border-width
slug: Web/CSS/border-width
page-type: css-shorthand-property
browser-compat: css.properties.border-width
---

{{CSSRef}}

The **`border-width`**[shorthand](/en-US/docs/Web/CSS/CSS_cascade/Shorthand_properties)[CSS](/en-US/docs/Web/CSS) property sets the width of an element's border.

{{InteractiveExample("CSS Demo: border-width")}}

```css interactive-example-choice
border-width: thick;
```

```css interactive-example-choice
border-width: 1em;
```

```css interactive-example-choice
border-width: 4px 1.25em;
```

```css interactive-example-choice
border-width: 2ex 1.25ex 0.5ex;
```

```css interactive-example-choice
border-width: 0 4px 8px 12px;
```

```htmlinteractive-example
<section class="default-example" id="default-example">
 <div class="transition-all" id="example-element">
 This is a box with a border around it.
 </div>
</section>
```

```css interactive-example
#example-element {
background-color: palegreen;
color: #000;
border: 0solidcrimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
```

## Constituent properties

This property is a shorthand for the following CSS properties:

-[`border-bottom-width`](/en-US/docs/Web/CSS/border-bottom-width)
-[`border-left-width`](/en-US/docs/Web/CSS/border-left-width)
-[`border-right-width`](/en-US/docs/Web/CSS/border-right-width)
-[`border-top-width`](/en-US/docs/Web/CSS/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 {{cssxref("&lt;length&gt;")}} or a keyword. If it'sa 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

{{CSSInfo}}

## Formal syntax

{{csssyntax}}

## 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: solidred;
border-width: 2px10px;
}
#three-values {
border: dottedorange;
border-width: 0.3em09px;
}
#four-values {
border: solidlightgreen;
border-width: thinmediumthick1em;
}
p {
width: auto;
margin: 0.25em;
padding: 0.25em;
}
```

#### Result

{{ EmbedLiveSample('A_mix_of_values_and_lengths', 320, 320) }}

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- The border-related shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}
- The border-width-related properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}