Javascript Reference - HTML DOM Style borderImage Property

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

Omitted values are set to their default values.

Browser Support


`borderImage`	Yes	11.0	Yes	Yes	15.0

Syntax

Return the borderImage property:

var v = object.style.borderImage

Set the borderImage property:

object.style.borderImage=source slice width outset repeat|initial|inherit

Property Values

Value	Description
borderImageSource	Set image path used for border
borderImageSlice	Set the image-border inward offsets
borderImageWidth	The image-border widths
borderImageOutset	Amount for the border image extends beyond the border box
borderImageRepeat	Whether the image-border should be repeated, rounded or stretched
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

Default Value:	none 100% 1 0 stretch
Return Value:	A string representing the border-image property
CSS Version	CSS3

Example

The following code shows how to set an image as the border around a div element.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!-- w w  w  .  jav a2  s. co  m-->
    border: 15px solid transparent;
    width: 250px;
    padding: 10px 20px;
    -webkit-border-image: url(http://java2s.com/style/demo/border.png) 30 30 stretch; /* Safari 5 */
    -o-border-image: url(http://java2s.com/style/demo/border.png) 30 30 stretch; /* Opera 12 */
    border-image: url(http://java2s.com/style/demo/border.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(http://java2s.com/style/demo/border.png) 30 30 round";  /* Code for Safari 5 */
    document.getElementById("myDIV").style.OBorderImage = "url(http://java2s.com/style/demo/border.png) 30 30 round";  /* Code for Opera 12 */
    document.getElementById("myDIV").style.borderImage = "url(http://java2s.com/style/demo/border.png) 30 30 round";
}
</script>

</body>
</html>

The code above is rendered as follows: