CSS border-image-repeat Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 13 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-image-repeat property in CSS defines how the border image is repeated, stretched, or rounded when it is applied to an element. This property is particularly useful when you want to create decorative borders using images, allowing you to control how the image is handled within the border area of an element.

💡 Syntax

The syntax for the border-image-repeat property is as follows:

Syntax

Copied

element {
  border-image-repeat: value;
}

🎛️ Default Value

The default value of the border-image-repeat property is stretch. This means that the border image will be stretched to fill the space along the borders.

🏠 Property Values

Value	Description
stretch	The border image is stretched to fill the space.
repeat	The border image is repeated (tiled) to fill the space.
round	The border image is repeated, but if it does not fit perfectly, it will be scaled to fit.
space	The border image is repeated, with extra space being added between the tiles to ensure they fit perfectly.

📄 Example

In this example, we will apply a border image to a div element and use the border-image-repeat property to control how the image is repeated.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-image-repeat Example</title>
  <style>
    .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;
    }
  </style>
</head>
<body>
  <h1>Border Image Repeat Example</h1>
  <div class="border-box">
    Content inside the border.
  </div>
</body>
</html>

In this example, the border-image-repeat is set to round, which means the border image will be repeated, and if it doesn’t fit perfectly, it will be scaled to ensure it does.

🖥️ Browser Compatibility

The border-image-repeat property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. For best results, test your website in different browsers to ensure consistent rendering.

🎉 Conclusion

The border-image-repeat property offers a versatile way to control how border images are applied to elements. Whether you need the image to stretch, repeat, round, or space out, this property gives you the flexibility to create visually appealing and dynamic borders for your web designs. Experiment with different values to see how they can enhance the look of your borders.