Javascript DOM CSS Style borderImageRepeat Property

Introduction

Specify how to repeat the image-border:

document.getElementById("myDIV").style.borderImageRepeat = "round";

Click the button to set the value of the borderImageRepeat property to "round".

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
div {//ww w  .j  av a2s  . com
  background-color: lightgrey;
  border: 30px solid transparent;
  border-image: url('image3.png') 30 30 30 30 1 1 1 1 0 stretch;
}
</style>
</head>
<body>

<div id="main">
<p>
This is a DIV element that uses an image as a border.
</p>
</div>
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  document.getElementById("main").style.borderImageRepeat = "round";
}
</script>

</body>
</html>

The borderImageRepeat property sets or gets whether the image-border should be repeated, rounded or stretched.

Property Values

Value	Description
stretch	`Default`. The image is stretched to fill the area
repeat	The image is repeated to fill the area
round	The image is repeated to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so it fits
space	The image is 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
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The borderImageRepeat property returns a String representing the border-image-repeat property of an element.

Previous Next