CSS border-image-repeat Property

CSS border-image-repeat

The border-image-repeat property in CSS specifies how the middle section of a border image is repeated, stretched, or spaced along the borders of an element. This property controls how the border image fills the border area and supports multiple values for horizontal and vertical behavior.

Syntax of border-image-repeat

</>

Copy

border-image-repeat: stretch | repeat | round | space | initial | inherit;

Values

Value	Description
`stretch`	The image is stretched to fill the border area. This is the default value.
`repeat`	The image is tiled (repeated) to fill the border area.
`round`	The image is tiled (repeated) to fill the border area. If the image does not fit perfectly, it is scaled to fit.
`space`	The image is tiled (repeated) to fill the border area. Extra space is distributed around the images.
`initial`	Sets the property to its default value (`stretch`).
`inherit`	Inherits the value from its parent element.

Default Value

stretch

Examples for border-image-repeat

Using the CSS border-image-repeat Property

The following examples demonstrate how to use the border-image-repeat property to control how a border image is displayed.

</>

Copy

/* Use the default value (stretch) */
.element {
  border-image-source: url('border.png');
  border-image-slice: 30;
  border-image-repeat: stretch;
}

/* Repeat the border image */
.element {
  border-image-source: url('border.png');
  border-image-slice: 30;
  border-image-repeat: repeat;
}

/* Round the border image */
.element {
  border-image-source: url('border.png');
  border-image-slice: 30;
  border-image-repeat: round;
}

/* Space the border image */
.element {
  border-image-source: url('border.png');
  border-image-slice: 30;
  border-image-repeat: space;
}

Example for Repeated Border Image

Below is an example demonstrating how to use border-image-repeat: repeat to repeat the border image along the element’s borders:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    border: 20px solid transparent;
    padding: 20px;
    border-image-source: url('https://www.tutorialkart.com/img/border-star.png');
    border-image-repeat: repeat;
    border-image-slice: 83;
    border-image-width: 28px;
  }
</style>
</head>
<body>

<h2 class="highlight">Lorem Ipsum</h2>

</body>
</html>

Example for border-image-repeat property with space

Below is an example demonstrating how to use border-image-repeat: repeat to repeat the border image along the element’s borders:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    border: 20px solid transparent;
    padding: 20px;
    border-image-source: url('https://www.tutorialkart.com/img/border-star.png');
    border-image-repeat: space;
    border-image-slice: 83;
    border-image-width: 28px;
  }
</style>
</head>
<body>

<h2 class="highlight">Lorem Ipsum</h2>

</body>
</html>

Example for border-image-repeat property with space

Below is an example demonstrating how to use border-image-repeat: repeat to repeat the border image along the element’s borders:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    border: 20px solid transparent;
    padding: 20px;
    border-image-source: url('https://www.tutorialkart.com/img/border-star.png');
    border-image-repeat: stretch;
    border-image-slice: 83;
    border-image-width: 28px;
  }
</style>
</head>
<body>

<h2 class="highlight">Lorem Ipsum</h2>

</body>
</html>

Browser Support

The border-image-repeat property is supported in modern browsers. Below is a compatibility table:

Browser	Version
Chrome	15.0
Edge	11.0
Firefox	15.0
Safari	6.0
Opera	15.0

TutorialKart

CSS border-image-repeat Property