border-image-repeat: value; object.style.borderImageRepeat = "value"; <'border-image-repeat'> = [ stretch | repeat | round | space ]{1,2} stretch The image is stretched to fill the area.
repeat The image is tiled (repeated) to fill the area.
round The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does.
space The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.
<!doctype html>
<html>
<head>
<style>
p
{
border-image-repeat: round;
border-image-slice: 33.33%;
border-image-source: url(/assets/svg/9Slice.svg);
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<p>round</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
border-image-repeat: space;
border-image-slice: 33.33%;
border-image-source: url(/assets/svg/9Slice.svg);
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<p>space</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
border-image-repeat: stretch;
border-image-slice: 33.33%;
border-image-source: url(/assets/svg/9Slice.svg);
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<p>stretch</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
border-image-slice: 33.33%;
border-image-source: url(/assets/svg/9Slice.svg);
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<button>initial</button>
<button>repeat</button>
<button>round</button>
<button>space</button>
<button>stretch</button>
<p>border-image-repeat</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.borderImageRepeat = myparameter.target.innerHTML;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>