border-image-repeat
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
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>
Result
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
Values
| Value | Description | Play it |
|---|---|---|
| stretch | Every gap between each border will be filled with stretched images. This is the default value. | Play it » |
| repeat | Every gap between each border will be filled with repeated images. For reaching proper fit, repeats may be clipped. | Play it » |
| round | Every gap between each border will be filled with repeated with images. For reaching proper fit repeats may be stretched. | Play it » |
| 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. | Play it » |
| inherit | Inherits the property from its parent element. |