Javascript DOM CSS Style borderImageSource Property

Introduction

Use an image as the border around a div element:

document.getElementById("myDIV").style.borderImageSource = "url(image3.png)";

Click the button to change the value of the borderImageSource property.

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
div {/*from  w ww .java2s.  c om*/
  background-color: lightgrey;
  border: 30px solid transparent;
  border-image: url('image3.png') 30 1 1 1 1 0 round;
}
</style>
</head>
<body>

<div id="main">
<p>
This is a DIV element that uses an image as a border.
</p>
</div>

<p>Here are the two images used:</p>
<img src="image3.png">
<img src="img_flwr.gif" width="224" height="162">
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  document.getElementById("main").style.borderImageSource = "url('img_flwr.gif')";
}
</script>
</body>
</html>

The borderImageSource property sets or gets the image to be used.

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

Property Values

Value	Description
none	Default. No image will be used
image	The path to the image to be used as a border
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The borderImageSource property returns a String representing the border-image-source property of an element.

Previous Next