The **`border-image` property** specifies an image as a border of an element. 

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 slice width outset repeat|initial|inherit;
```

# Property values

- **`border-image-source`**: It is used to specify the path to the image we have to use as a border.

- **`border-image-slice`**: It is used to specify the dimensions for slicing the source image.

- **`border-image-width`**: It is used to specify the width of the source image.

- **`border-image-outset`**: It is used to specify the distance of the image from the element's outer edge.

- **`border-image-repeat`**: It is used to specify whether the images should be rounded, repeated, or stretched.

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

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

# Code






<html>
 <head>
 </head>
 <body>
   <div id="border1">Basic Example</div>
 </body>
</html>

#border1{
  width: 200px;
  border: 30px solid;
  border-image: url(border.png) 50 round;
  padding: 20px;
}

What is the CSS border-image property?

Syntax

Property values

Code