Javascript DOM CSS Style borderImageWidth Property

Introduction

Specify the widths of the image-border:

document.getElementById("myDIV").style.borderImageWidth = "20px 30px";

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

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
div {//from  w ww.ja  v a2s . c  o  m
  background-color: lightgrey;
  border: 30px solid transparent;
  border-image: url('image3.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 DIV element that uses an image as a border.</p>
</div>
<button onclick="myFunction()">Test</button>

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

</body>
</html>

The borderImageWidth property specifies the widths of the image-border.

Property Values

Value	Description
length	A length unit setting the size of the border-width
number	Default value 1. Represents multiples of the corresponding border-width
%	Refers to the size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets
auto	If specified, the width is the intrinsic width or height of the corresponding image slice
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

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

Previous Next