The **`border-image-width` property** in #key# CSS: Cascade Style Sheets #key# is used to define the *width* of the image that we want to use as a border. It can take up to four values, i.e., left, right, top, and bottom.

It is a shorthand property of the following:

- `border-image-source`

- `border-image-slice`

- `border-image-width`

- `border-image-outset`

- `border-image-repeat`

#     
#  Syntax

---
``` css
border-image-width: number|percentage|auto|initial|inherit;
```
---

##  
## Property values

- **`number`**: Its default value is one. It is used to specify the width of the `border-image`.

- **`length`**: used to define the thickness of the `border-image`. Its unit is "px". 

- **`percentage`**: used to define the value which sets the thickness of the border for left, right, top, and bottom offsets. 

- **`auto`**: used to set the border of the image which is specified in the border-image-slice property.

- **`initial`**: used to set the value to its default value.

- **`inherit`**:  used to inherit property from its parent value.

<!DOCTYPE html>
<title>Test Program</title>

<div class="bdr">
  Welcome To Educative Edpresso Shots
</div>

.bdr {
  width: 150px;
  padding: 20px;
  border: 1em double #edb745;
  border-image-source: url(http://www.google.com/download.png); 
  border-image-slice: 28; 
  border-image-width: 0.6em 1.0em; 
  border-image-outset: 0em 1.1em 1.5em 0.6em; 
  border-image-repeat: round; 
}

codemirror

What is the CSS border-image-width property?

Defines the width of an image used as a border, with values: number, length, percentage, or auto.

What is the CSS border-image-width property?

Syntax

Property values

Code