The **`border-image-slice` property** is used to determine how to slice an image.  If the image is sliced, it is then divided into nine sections i.e. the middle, four corners, and four edges. 


# 
## Syntax

We use the following syntax if we want all the sides to be equal.
```CSS
border-image-slice: value
```

We use the following syntax if we want to define all the sides separately.

```css
border-image-slice: number|percentage|fill|initial|inherit;
```

## Property values

- **`number`:** This is used to represent the pixels for the image.

- **`percentage`**: This is used to define the height or width of the image. 

- **`fill`**: This is used to fill the middle part of the image.

- **`initial`:** This is used to set the value to it's default value.

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

## Code



<!DOCTYPE html>
<title>Test</title>
<style>
.border1 {
  width: 100px;
  padding: 20px;
  border: 1em double #edb721;
  border-image-source: url(http://www.google.com/download.png); 
  border-image-slice: 20; 
  border-image-width: 10px; 
  border-image-outset: 0; 
  border-image-repeat: round; 
}
</style>
<div class="border1">
  Welcome to Educative Edpresso Shots
</div>

<!DOCTYPE html>
<title>Test</title>
<style>
.border1 {
  width: 100px;
  padding: 20px;
  border: 1em double #edb721;
  border-image-source: url(http://www.google.com/download.png); 
  border-image-slice: 20; 
  border-image-width: 10px; 
  border-image-outset: 0; 
  border-image-repeat: round; 
}
</style>
<div class="border1">
  Welcome to Educative Edpresso Shots
</div>

codemirror

What is the CSS border-image-slice property?

The border-image-slice property defines how to slice an image into nine sections, with multiple value options.