CSS border-image-repeat Property

February 10, 2021 12:37 pm IST

You are Here:

CSS border-image-repeat Property

CSS border-image-repeat property specifies whether the border image should be repeated, rounded, stretched, or space.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 15px solid transparent; padding: 15px; border-image-source: url(border.png); border-image-slice: 30; } #point{ border-image-repeat: repeat; } #point1{ border-image-repeat: round; } #point2{ border-image-repeat: stretch; } #point3{ border-image-repeat: space; } </style> </head> <body> <h1>CSS border-image-repeat Property</h1> <h2>border-image-repeat: repeat;</h2> <div id="point"> border-image-repeat: repeat; </div> <h2>border-image-repeat: round;</h2> <div id="point1"> border-image-repeat: round; </div> <h2>border-image-repeat: stretch;</h2> <div id="point2"> border-image-repeat: stretch; </div> <h2>border-image-repeat: space;</h2> <div id="point3"> border-image-repeat: space; </div> </body> </html>

Run

Syntax

Using CSS

element{ border-image-repeat: round; }

Using Javascript

object.style.borderImageRepeat="round";

Animatable

No, border-image-repeat property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS border-image-repeat property is stretch.

Property Value

The following table provides a list of values for CSS border-image-repeat property.

Value	Explanation
repeat	The image is tiled (repeated) to fill the gap between each border. Tiles may be clipped to achieve the proper fit.
round	The imaeg is tiled (repeated) to fill the gap between each border. Tiles may be stretched to achieve the proper fit.
stretch	The image is stretched to fill the gap between each border.
space	The image is tiled (repeated) to fill the gap between each border. Extra space will be distributed in between tiles to achieve the proper fit.

Using JavaScript

In the following example, we will demonstrate how to change the CSS border-image-repeat property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 15px solid transparent; padding: 15px; border-image-source: url(border.png); border-image-slice: 30; border-image-repeat: round; } </style> </head> <body> <h1>CSS border-image-repeat Property</h1> <div> This is div container. </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.borderImageRepeat = "stretch"; } </script> </body> </html>

Run