Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set the border image as rounded, repeated and stretched with CSS
The border-image-repeat property is used to set how the border image is repeated, stretched, or rounded along the border edges. This property controls the behavior of the border image segments between the corners.
Syntax
selector {
border-image-repeat: value;
}
Possible Values
| Value | Description |
|---|---|
stretch |
The border image is stretched to fill the area (default) |
repeat |
The border image is repeated to fill the area |
round |
The border image is repeated and scaled to fit the area perfectly |
space |
The border image is repeated with spacing to fill the area |
Example 1: Round Border Repeat
The following example shows how to create a rounded border image repeat −
<!DOCTYPE html>
<html>
<head>
<style>
.border-round {
border: 15px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 40;
border-image-width: 20px;
margin: 20px;
}
</style>
</head>
<body>
<p class="border-round">This border image uses round repeat.</p>
</body>
</html>
A paragraph with a decorative border that repeats and scales to fit perfectly around the element.
Example 2: Comparing Different Repeat Values
This example demonstrates the difference between stretch, repeat, and round values −
<!DOCTYPE html>
<html>
<head>
<style>
.border-base {
border: 15px solid transparent;
padding: 10px;
margin: 10px;
border-image-source: url(/css/images/border.png);
border-image-slice: 30;
border-image-width: 15px;
}
.stretch { border-image-repeat: stretch; }
.repeat { border-image-repeat: repeat; }
.round { border-image-repeat: round; }
</style>
</head>
<body>
<div class="border-base stretch">Stretch: Border image is stretched</div>
<div class="border-base repeat">Repeat: Border image repeats as-is</div>
<div class="border-base round">Round: Border image repeats and scales</div>
</body>
</html>
Three boxes showing different border image repeat behaviors: stretched border, repeating border pattern, and scaled repeating border pattern.
Conclusion
The border-image-repeat property provides control over how border images are displayed along the edges. Use round for seamless scaling, repeat for exact repetition, or stretch for filling the entire border area.
Updated on: 2026-03-15T11:58:05+05:30
312 Views
Advertisements