The **`border-width` property** is used to set the width of a border in CSS. 

> The `border-width` element is always used after the `border-style` element. 

> **`border-style` element** is used to give a border to an element. 

# Syntax

The syntax of the `border-width` property is as followed: 

```CSS
border-width: medium|thin|thick|length|initial|inherit;
```

# Possible values

The `border-width` property can taken in six possible values: 

* **Medium:** This is also the value by default. Sets border width to medium

* **Thin:** Sets border width to thin

* **Thick:** Sets border width to thick

* **Length:** We can also define a border based on length in pixels such at 10px, 20px and such.

* **Initial:** Sets border width to the default value

* **Inherit:** Inherits a border width from its parent element

# Different borders of the same element

We can also add borders of different widths to a single element. The following describes the syntax for doing so:

``` CSS
border-width: top right thin left
```

Each of the four sides can take any of the possible values discussed above. 

# Examples

The code snippets below show multiple ways of using the `border-width property in CSS:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  border-style: solid;
  border-width: medium;
}
h2 {
  border-style: solid;
  border-width: thin;
}

h3 {
  border-style: solid;
  border-width: thick;
}

h4 {
  border-style: solid;
  border-width: 30px;
}

div {
  border-style: solid;
  border-width: initial;
}
</style>
</head>
<body>

<h1>A heading with a medium border</h1>
<h2>A heading with a thin border</h2>
<h3>A heading with a thick border</h3>
<h4>A heading with a 30px border</h4>

<div>A div element with a initial (default) border.</div>

</body>
</html>

codemirror

What is border-width property in CSS?

Sets border width in CSS using medium, thin, thick, or length values, following border-style.