Javascript DOM CSS Style borderImage Property

Introduction

Specify an image as the border around a <div> element:

document.getElementById("myDIV").style.borderImage = "url(image3.png) 30 30 round";

Click the button to change the border-image property of the DIV element:

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*from  w  w  w  .  j  av  a 2  s .  c  o  m*/
  border: 15px solid transparent;
  width: 250px;
  padding: 10px 20px;
  -webkit-border-image: url(image3.png) 30 30 stretch; /* Safari 5 */
  -o-border-image: url(image3.png) 30 30 stretch; /* Opera 12 */
  border-image: url(image3.png) 30 30 stretch;
}
</style>
</head>
<body>


<button onclick="myFunction()">Test</button>

<div id="myDIV">
<h1>Hello</h1>
</div>

<script>
function myFunction() {
  document.getElementById("myDIV").style.WebkitBorderImage = "url(image3.png) 30 30 round";  /* Code for Safari 5 */
  document.getElementById("myDIV").style.OBorderImage = "url(image3.png) 30 30 round";  /* Code for Opera 12 */
  document.getElementById("myDIV").style.borderImage = "url(image3.png) 30 30 round";
}
</script>

</body>
</html>

The borderImage property is a shorthand property for setting the borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset and borderImageRepeat properties.

Omitted values are set to their default values.

Property Values

Value	Description
borderImageSource	The path to the image to be used as a border
borderImageSlice	The inward offsets of the image-border
borderImageWidth	The widths of the image-border
borderImageOutset	The amount by which the border image area extends beyond the border box
borderImageRepeat	Whether the image-border should be repeated, rounded or stretched
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The borderImage property default Value:

none 100% 1 0 stretch

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

Previous Next