HTML DOM Style borderImageWidth Property

The HTML DOM borderImageWidth property is used to set or get the width of the border image for an element.

Following is the syntax for −

Setting the borderImageWidth property − = "number|%|auto|initial|inherit"

The above properties are explained as follows −

lengthFor describing the border width size in px.
numberFor describing the border width in multiples of corresponding border width and it’s default value is 1.
%For describing the horizontal offsets and vertical off sets for the border image area width.
autoThis sets the width and height corresponding to the image width and height.
initialFor setting this property to default value.
inheritTo inherit the parent property value.

Let us look at an example for the borderImageWidth property −


 Live Demo

<!DOCTYPE html>
   #DIV1 {
      width: 400px;
      padding: 25px;
      border-style: solid;
      border-color: transparent;
      border-image-slice: 30;
      border-image-source: url("            logo.jpg");
      border-image-width: 10px;
   function changeBorderWidth(){
      document.getElementById("Sample").innerHTML="The border image width is now increased";
<div id="DIV1">HELLO</div>
<p>Increase the above div border image width by clicking the below button</p>
<button onclick="changeBorderWidth()">Change Border Width</button>
<p id="Sample"></p>


On clicking the “Change Border Width” button −

Updated on: 22-Oct-2019


Kickstart Your Career

Get certified by completing the course

Get Started