The **`border-image-source` property** is used to define the source of the image that we want to use as a border.

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-source: none|image|initial|inherit;

```

#     
## Property values

- `none:` It is used to specify that we don't want to use any image. 

- `image:` It is used to specify the path of the image that is used to be displayed as a border.

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

- `inherit:` It is used to inherit the value from its parent.

##
## Code



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

.bdr {
  width: 150px;
  height: 40px;
  padding: 20px;
  border: 1em double #edb745;
  border-image-source: url(https://www.pngkit.com/png/full/742-7427019_thumbnail-frame-png.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 CSS border-image-source property?

Defines the image source for a border, including options like none, image path, initial, and inherit.