CSS border-image-repeat Property
The CSS border-image-repeat property is used to specify if the border-image will be rounded, repeated, or stretched. It is one of the CSS3 properties.
The border-image-repeat property may be defined using one or two values. If one value is specified, it applies the same behavior on all four sides. If two values are specified, the first applies to the top and bottom, and the second to the left and right.
| Initial Value | stretch |
| Applies to | All elements, except internal table elements when border-collapse is "collapse". It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.borderImageRepeat = "round"; |
Syntax¶
border-image-repeat: stretch | repeat | round | initial | inherit;Example of the border-image-repeat property: ¶
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 20px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 100;
border-image-repeat: round;
border-image-width: 10px;
}
</style>
</head>
<body>
<h2>Border-image-slice property example</h2>
<p class="border">border-image-repeat: round;</p>
<p>Here is the original image used:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
</body>
</html>Example of the border-image-repeat property with the "round" and "repeat" values:¶
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.border1 {
border: 10px solid transparent;
padding: 20px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 100;
border-image-repeat: round;
border-image-width: 10px;
}
.border2 {
border: 10px solid transparent;
padding: 20px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 100;
border-image-repeat: repeat;
border-image-width: 10px;
}
</style>
</head>
<body>
<h2>Border-image-repeat property example</h2>
<p class="border1">border-image-repeat: round;</p>
<p class="border2">border-image-repeat: repeat;</p>
<p>Here is the original image used:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
</body>
</html>Example of the border-image-repeat property with the "space" and "stretched" values: ¶
<!DOCTYPE html>
<html>
<head>
<style>
.border1 {
border: 10px solid transparent;
padding: 20px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 100;
border-image-repeat: space;
border-image-width: 10px;
}
.border2 {
border: 10px solid transparent;
padding: 20px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 100;
border-image-repeat: stretch;
border-image-width: 10px;
}
</style>
</head>
<body>
<h2>Border-image-repeat property example</h2>
<p class="border1">border-image-repeat: space;</p>
<p class="border2">border-image-repeat: stretch;</p>
<p>Here is the original image used:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
</body>
</html>Values¶
| Value | Description | |
|---|---|---|
| stretch | Every gap between each border will be filled with stretched images. This is the default value. | |
| repeat | Every gap between each border will be filled with repeated images. For reaching proper fit, repeats may be clipped. | |
| round | Every gap between each border will be filled with repeated images. For reaching proper fit repeats may be stretched. | |
| space | Every gap between each border will be filled with repeated images. For reaching proper fit extra space will be distributed between repeats. | |
| initial | Sets the property to its default value. | |
| inherit | Inherits the property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji