CSS border-image-repeat Property

Definition and Usage

The border-image-repeat property controls how the edge slices of a border-image fill each side: stretch them, tile them, scale tiles to fit (round), or leave gaps between tiles (space).

It only affects a painted border image. You need a source and a slice first. The middle area of the box is filled only when border-image-slice includes fill.

CSS Syntax

One value sets all sides. Two values: first is top, middle, and bottom; second is left and right. Example: border-image-repeat: round stretch;.

Property Values

How to Use border-image-repeat

Set up a border image, then choose how its edge slices fill each side.

1. Give the element a non-zero border-width (for example border: 20px solid;).
2. Apply a border image with border-image or the source and slice longhands.
3. Set border-image-repeat to stretch, repeat, round, or space. It is not inherited.
4. Use two values when horizontal and vertical edges should behave differently.

Live Preview

A striped border image. Change border-image-repeat and watch how the edge pattern fills the sides.

CSS Examples

Each snippet adds only what border-image-repeat needs: a border, a sliced image, and a repeat keyword. Use Try It Yourself for a live editor.

<style>
  div {
    border: 20px solid;
    border-image: repeating-linear-gradient(
      45deg, #2563eb 0 8px, #fbbf24 8px 16px
    ) 8;
    border-image-repeat: stretch;
    padding: 12px;
  }
</style>

<div>stretch</div>

<style>
  div {
    border: 20px solid;
    border-image: repeating-linear-gradient(
      45deg, #2563eb 0 8px, #fbbf24 8px 16px
    ) 8;
    border-image-repeat: round;
    padding: 12px;
  }
</style>

<div>round</div>

<style>
  div {
    border: 20px solid;
    border-image: repeating-linear-gradient(
      45deg, #059669 0 8px, #fff 8px 16px
    ) 8;
    border-image-repeat: round stretch;
    padding: 12px;
  }
</style>

<div>round stretch</div>

Key Takeaways