borderImageRepeat Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:borderImageRepeat

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. borderImageRepeat

Description

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

Property Values

Value Description
stretch Default value. 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 whole number of tiles cannot cover, the image is rescaled so it fits
space The image is repeated to fill the area. If whole number of tiles cannot cover, the extra space is distributed around the tiles
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: stretch
Return Value: A String, representing the border-image-repeat property of an element
CSS VersionCSS3

Set how to repeat the image-border:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div//from   ww  w.ja va2 s  . c om
{
background-color:lightgrey;
border:30px solid transparent;
border-image: url('http://java2s.com/resources/a.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 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>

Related Tutorials