CSS

🔁 CSS Tutorial: border-image-repeat

📌 Introduction

The border-image-repeat property defines how the slices of a border-image are repeated, stretched, or rounded around the element’s edges. After an image is sliced using border-image-slice, each side of the border must be placed along the element’s edges. This property determines the behavior of that placement. It is essential for creating decorative frames, patterned borders, and artistic UI components. 🎨✨

🎯 What Does border-image-repeat Control?

How each border slice fits along each side of the element
Whether slices stretch, repeat, or evenly round
Whether horizontal and vertical edges use different rules
Controls the tiling behavior of border images

✨ Syntax

Syntax

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

Note

You can set 1 value (applies to both directions) or 2 values → horizontal vertical.

🧩 Available Values

1. stretch (default)

Stretches the image slice to fit the entire length.

Stretch Example

border-image-repeat: stretch;

2. repeat

Repeats (tiles) the slice along the edge — may cut at ends.

Repeat Example

border-image-repeat: repeat;

3. round

Repeats the image but scales the slices slightly so wholes fit perfectly — no partial tiles.

Round Example

border-image-repeat: round;

4. space

Adds spacing between repeated slices. Slices are repeated without stretching. Extra space is distributed evenly.

Space Example

border-image-repeat: space;

🧩 Using Two Values

First value applies horizontally, second applies vertically:

Two-Value Example

/* horizontal | vertical */
border-image-repeat: repeat stretch;

🔍 Visual Explanation

Further details can be found at: https://dummyimage.com/900x260/eeeeee/000000&text=stretch+vs+repeat+vs+round+vs+space

🔥 Practical Examples

1. Decorative Border with Repeat

Repeat Border

.pattern-border {
  border: 20px solid transparent;
  border-image-source: url("pattern.png");
  border-image-slice: 20;
  border-image-repeat: repeat;
}

2. Gradient Border Using Stretch

Gradient Stretch

.gradient {
  border: 15px solid transparent;
  border-image-source: linear-gradient(45deg, #f093fb, #f5576c);
  border-image-slice: 1;
  border-image-repeat: stretch;
}

3. Fancy Border with Round

Round Border

.round-frame {
  border: 25px solid transparent;
  border-image-source: url("decor.png");
  border-image-slice: 30;
  border-image-repeat: round;
}

4. Spaced Pattern Border

Space Tiling

.spaced {
  border: 20px solid transparent;
  border-image-source: url("pattern.png");
  border-image-slice: 20;
  border-image-repeat: space;
}

5. Mixed Repeat Settings

Horizontal vs Vertical

.mixed {
  border: 20px solid transparent;
  border-image-source: url("texture.png");
  border-image-slice: 25;
  border-image-repeat: repeat stretch;
}

📊 Summary Table

Value	Description	Use Case
stretch	Stretches slices to cover full border	Gradients, clean borders
repeat	Tiles the slices	Patterns, ornaments
round	No partial tiles — scales to fit evenly	Decorative frames
space	Repeated slices with equal spacing	Unique patterned borders

🖼️ Visual Demo

Further details can be found at: https://dummyimage.com/900x280/eeeeee/000000&text=border-image-repeat+demo

>>“Once you control repetition, your border-image design becomes truly limitless.” ✨

🎉 Conclusion

The border-image-repeat property determines how your sliced border images are laid out along each edge. Whether you want stretching, repeating patterns, evenly rounded slices, or stylish spacing, this property gives you full creative control. Combine it with border-image-slice, border-image-width,border-image-outset, and border-image-source for advanced, beautiful border designs. 🚀