Javascript Reference - HTML DOM Style borderImageSource Property

The borderImageSource property sets or gets the image path.

If the value is "none", or if the image cannot be used, the border styles will be used.

Browser Support


`borderImageSource`	Yes	11.0	Yes	6.0	No

Syntax

Return the borderImageSource property:

var v = object.style.borderImageSource

Set the borderImageSource property:

object.style.borderImageSource=none|image|initial|inherit

Property Values

none: No image
image: URL for the image

Technical Details

Default Value:	none
Return Value:	A string representing the border-image-source property
CSS Version	CSS3

Example

The following code shows how to set image path for image border.


<!DOCTYPE html>
<html>
<head>
<style> 
div{<!--from   www .  jav a  2  s  .  c o  m-->
    background-color:lightgrey;
    border:30px solid transparent;
    border-image: none;
    border-image-slice: 30;
    border-image-width: 1 1 1 1;
    border-image-outset: 0;
    border-image-repeat: round;
}
</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.borderImageSource = "url('http://java2s.com/style/demo/border.png')";
}
</script>
</body>
</html>

The code above is rendered as follows: