The **`border-image-repeat` property** is used to specify whether the border-image should be round, repeated, or stretched.

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-repeat: round|repeat|stretch|initial|inherit;
```
Use this to set to both the horizontal and vertical sides:

```css
border-image-repeat: value;
```
Use this to set to the horizontal and vertical sides separately:

```css
border-image-repeat: horizontal-Value Vertical-Value;
```

#     
## Property value

The following are the property values:

- `repeat:` The image will be repeated (i.e., tiled) to fill the area.
- `round:` The image will be repeated (i.e., tiled) to fill the area, but if it doesn't fill the area with a whole number of tiles, it will re-scale the image to fit the area.

- `stretch:` The image will stretch to fill the area (i.e., from one side to the other). It is also the default value.

- `initial:` This is used to set the image to the default value.

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

##    
## Code

The following is the basic HTML & CSS code to demonstrate the use of border-image-repeat property.

<body>
  <h1>
    This is a Border-Image-Repeat Example.
  </h1>

  <p id="borderImage">
    This is a Border Image Paragraph.
  </p>
</body>

#borderImage{
border: 10px solid black;
width: 200px;
padding: 15px;
border-image-source: url(https://www.freepnglogos.com/uploads/border-png/classic-borders-transparent-pictures-14.png);
border-image-slice: 30;
border-image-repeat: round;
}


codemirror

What is the CSS border-image-repeat property?

Specifies how the border-image should fill the area: repeat, round, stretch, initial, or inherit.