The **`border-image-outset` property** is used to define how far the border image area extends past the border box.

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-outset: length|number|initial|inherit;
```

## Property values

- **`length`** : Its default value is `0`. It is used to specify the distance of the border from the edges.

- **`number`**: It is used to represent a multiple of the border-width.

- **`initial`**: It is used to set the property to the default value.

- **`inherit`**: It is used to inherit the property from the parent element.
 

<!DOCTYPE html>
<title>Test Program</title>
<style>
.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; 
}
</style>
<div class="bdr">
  Welcome To Educative Edpresso Shots !
</div>

codemirror

What is the CSS border-image-outset property?

The border-image-outset property is used to define how far the border image area extends past the border box. It is a shorthand property of the following:   border-image-source   border-image-slice   border-image-width   border-image-outset   border-image-repeat    Syntax border-image-outset: length|number|initial|inherit;  Property values   length : Its default value is 0. It is used to specify the distance of the border from the edges.   number: It is used to represent a multiple of the border-width.   initial: It is used to set the property to the default value.   inherit: It is used to inherit the property from the parent element.   

What is the CSS border-image-outset property?

Syntax

Property values

Code