CSS border-image-repeat Property

What You’ll Learn

The border-image-repeat property controls how border image edge slices are drawn along each side — stretched, tiled, rounded to fit, or spaced evenly.

Definition and Usage

The border-image-repeat CSS property defines how the middle sections of a border image are repeated along the top, right, bottom, and left edges of an element. Corner slices stay fixed; this property affects only the edge regions between corners.

It is especially useful for decorative borders built from images or repeating patterns. Choosing the right keyword helps edges look smooth, evenly tiled, or intentionally stretched depending on your design.

📝 Syntax

border-image-repeat accepts one or two keyword values:

selector {
  border-image-repeat: stretch | repeat | round | space;
}

/* horizontal | vertical */
selector {
  border-image-repeat: round repeat;
}

Basic Example

.border-box {
  width: 300px;
  height: 150px;
  border: 10px solid transparent;
  border-image-source: url("border-image.png");
  border-image-slice: 30;
  border-image-repeat: round;
}

Syntax Rules

• One keyword applies the same behavior to all four edges.
• Two keywords set horizontal edges first, then vertical edges.
• Valid keywords are stretch, repeat, round, and space.
• Requires a border image source and slice to be visible.
• Can also be set through the border-image shorthand.

Default Value

The default value of border-image-repeat is stretch. That means edge slices are scaled to fill the full length of each border side unless you choose another keyword.

💎 Property Values

Keyword Previews

border-image-repeat vs related properties

Examples Gallery

Try border-image-repeat with round, stretch, repeat, space, and two-value syntax.

<style>
  .border-box {
    width: 260px;
    height: 100px;
    padding: 0.75rem;
    border: 10px solid transparent;
    border-image: repeating-linear-gradient(45deg, #059669 0 10px, #fff 10px 20px) 10 round;
    background: #fff;
  }
</style>

<div class="border-box">
  Content inside the border.
</div>

.frame {
  border: 8px solid transparent;
  border-image: repeating-linear-gradient(45deg, #2563eb 0 8px, #fff 8px 16px) 8 stretch;
  padding: 1rem;
  background: #fff;
}

.tile-border {
  border: 8px solid transparent;
  border-image: repeating-linear-gradient(90deg, #dc2626 0 12px, #fff 12px 24px) 8 space;
  width: 16rem;
  height: 5rem;
  background: #fff;
}

.panel {
  border: 8px solid transparent;
  border-image-source: repeating-linear-gradient(45deg, #7c3aed 0 8px, #fff 8px 16px);
  border-image-slice: 8;
  border-image-repeat: round stretch;
  padding: 1rem;
  background: #fff;
}

💡 Best Practices