Javascript Reference - HTML DOM Style borderImageWidth Property

The borderImageWidth property sets and gets the widths of the image-border.

Browser Support


`borderImageWidth`	Yes	11.0	Yes	6.0	No

Syntax

Return the borderImageWidth property:

var v = object.style.borderImageWidth

Set the borderImageWidth property:

object.style.borderImageWidth=number|%|auto|initial|inherit

Property Values

length: the width of the border. an absolute or relative length. This length must not be negative.
percentage: the width of the border as a percentage of the element. The percentage must not be negative.
number: Default value 1. Represents multiples of the corresponding border-width
auto: Indicates that the border width/height must be the intrinsic size of that dimension.
initial: sets to default value
inherit: Inherits this property from its parent element

Technical Details

Default Value:	1
Return Value:	A string representing the border-image-width property
CSS Version	CSS3

Example

The following code shows how to set the widths of the image-border.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--  w ww . j a  v a  2  s  .c  o m-->
    background-color: lightgrey;
    border: 30px solid transparent;
    border-image: url('http://java2s.com/style/demo/border.png');
    border-image-slice: 30;
    border-image-width: 10px;
    border-image-outset: 0;
    border-image-repeat: round;
}
</style>
</head>
<body>

<div id="main"><p>This is a test.</p></div>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("main").style.borderImageWidth = "30px 30px";
}
</script>

</body>
</html>

The code above is rendered as follows: