Javascript Reference - HTML DOM Style borderImageRepeat Property
The borderImageRepeat property sets or
sets whether to repeat, round or stretch the image-border.
Browser Support
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
borderImageRepeat |
Yes | 11.0 | Yes | 6.0 | No |
Syntax
Return the borderImageRepeat property:
var v = object.style.borderImageRepeat
Set the borderImageRepeat property:
object.style.borderImageRepeat=stretch|repeat|round|initial|inherit
Property Values
- stretch
- Default value. stretch image to fill the border
- repeat
- tile image to fill the border
- round
- tile image to fill the border. rescale image if the whole number of images cannot fit.
- space
- tile image to fill the border. distribute the extra space among tiles if the whole number of images cannot fit.
- initial
- sets to default value
- inherit
- Inherits this property from its parent element
Technical Details
| Default Value: | stretch |
|---|---|
| Return Value: | A string representing the border-image-repeat property |
| CSS Version | CSS3 |
Example
The following code shows how to repeat in the image-border.
<!DOCTYPE html>
<html>
<head>
<style>
div<!-- www . j ava 2 s . co m-->
{
background-color:lightgrey;
border:30px solid transparent;
border-image: url('http//:java2s.com/style/demo/border.png');
border-image-slice: 30 30 30 30;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat: stretch;
}
</style>
</head>
<body>
<div id="main">
<p>
This is a test. This is a test. This is a test.
</p>
</div>
<button onclick="myFunction()">test</button>
<script>
function myFunction(){
document.getElementById("main").style.borderImageRepeat = "round";
}
</script>
</body>
</html>
The code above is rendered as follows: