How to set the widths of the image border with JavaScript?

Javascript Web Development Front End Scripts

In this tutorial, we shall learn to set the widths of the image border with JavaScript. To set the widths of the image border, use the borderImageWidth property in JavaScript.

When we need an image as a border of our webpage content, we have to see how to set the width of the image border.

Let us discuss the option to achieve this in brief.

Using the Style borderImageWidth Property

With the Style borderImageWidth property, we can set or return the widths of the image border of an element.

The border image will range beyond the padding when the border image width is greater than the border width.

We can establish one, two, three, or four values for the borderImageWidth property.

If there is only one value, it applies to all four sides.
When two values are available, the first value sets the 'top and bottom,' and the second value sets the 'left' and the 'right'.
If there will be three values then the first value sets the top, the second sets both 'left' and the 'right,' and the third set the bottom.
When four values are present, the top, right, bottom, and left take the respective value in order.

Syntax

Users can follow the syntax below for using this property −

object.style.borderImageWidth = "length|number|%|auto|initial|inherit";

With the above syntax, we can set the required image border width to the element's style.

Parameters

length − A length unit in pixels defining the size of the border-width.
number − Defines multiples of the corresponding border-width.
% − Defines the size of the border image width for horizontal offsets and the height for vertical offsets.
auto − The width is the intrinsic width or height of the respective image.
initial − Sets this property to its default value.
inherit − Inherits this property from its parent element.

The default value of the given property is 1. The return value is a string representing the image border width.

Example 1

In the below example, we set the widths of the image border using the borderImageWidth property. You can try to run the following code to learn how to set widths of the border as an image −


<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         background-color:gray;
         border: 40px solid;
         border-image:
         url('https://www.tutorialspoint.com/images/neo4j.png');
         border-image-slice: 50;
         border-image-width: 20px;
         border-image-width: 1 1 1 1;
         border-image-outset: 0;
         border-image-repeat: round;
      }
   </style>
</head>
<body>
   <div id="box">
   <p>Demo Text!</p>
   </div>
   <button onclick="display()">Set Width</button>
   <script>
      function display(){
         document.getElementById("box").style.borderImageWidth = "20px 30px";
      }
   </script>
</body>
</html>

Example 2

In this program, we are setting the image border width to a div element. We get the image border width from the user.

When the user clicks press the button, we call the function to set the image border width following the syntax given above.


<html>
  <head>
    <style>
      #imgBrdrWdthUsrEl 
      {
        border: 15px solid transparent;
        padding: 10px;
        border-image-source: url(https://tutorialspoint.com/css/images/border.png);
        border-image-repeat: round;
        border-image-slice: 20;
        border-image-width: 20px;
      }
    </style>
    <script>
      function setImageBorderWidth() {
        var imgBrdrWdthUsrSelTag = document.getElementById("imgBrdrWdthUsrSel");
        var imgBrdrWdthUsrSelIndx = imgBrdrWdthUsrSelTag.selectedIndex;
        var imgBrdrWdthUsrSelStat = imgBrdrWdthUsrSelTag.options[imgBrdrWdthUsrSelIndx].text;
        var imgBrdrWdthUsrBtnWrap = document.getElementById("imgBrdrWdthUsrBtnWrap");
        var imgBrdrWdthUsrEl = document.getElementById("imgBrdrWdthUsrEl");
        imgBrdrWdthUsrEl.style.borderImageWidth = imgBrdrWdthUsrSelStat;
        imgBrdrWdthUsrEl.innerHTML = "You have set the image border width to <b>" + imgBrdrWdthUsrEl.style.borderImageWidth + "</b>";         
      }
    </script>
  </head>
  <body>
    <h2>Set the widths of the image border  using the <i>  borderImageWidth  </i>property.</h2>  
    <p id = "imgBrdrWdthUsrEl"> Image border. </p>
    <br>
    <div id = "imgBrdrWdthUsrBtnWrap">
    <select id = "imgBrdrWdthUsrSel">
      <option/> 5px
      <option/> 5px 10px;
      <option selected = "selected"/> 5px 10px 15px
      <option/> 5px 10px 15px 20px
      <option/> 5 10 15 20
      <option/> 1% 2% 3% 4%
      <option/> auto
      <option/> initial
      <option/> inherit
    </select>
    <br><br>    
      <p> Choose the image border width and click on the button. </p>
      <button onclick = "setImageBorderWidth();"> Change </button>
    </div>
    <br>  
  </body>
</html>

Example 3

We set different image border widths in this example on a paragraph tag. When the user clicks the button, we initiate the function to set the image border width.


<html>
<head>
   <style>
      #imgBrdr1{
         border: 10px solid #000000;
         padding: 20px;
         border-image:
         url("https://www.tutorialspoint.com/images/neo4j.png");
         border-image-slice: 10%;
         border-image-repeat: round;
         border-image-width: 0px;
         background-color: lavender;
      }
      #imgBrdr2{
         border: 10px solid #000000;
         padding: 20px;
         border-image:
         url("https://www.tutorialspoint.com/images/neo4j.png");
         border-image-slice: 10%;
         border-image-repeat: round;
         border-image-width: 0;
         background-color: pink;
      }
      #imgBrdr3{
         border: 10px solid #000000;
         padding: 20px;
         border-image:
         url("https://www.tutorialspoint.com/images/neo4j.png");
         border-image-slice: 10%;
         border-image-repeat: round;
         border-image-width: 0;
         background-color: lavender;
      }
      #imgBrdr4{
         border: 10px solid #000000;
         padding: 20px;
         border-image:
         url("https://www.tutorialspoint.com/images/neo4j.png");
         border-image-slice: 10%;
         border-image-repeat: round;
         border-image-width: 0;
         background-color: pink;
      }
   </style>
   <script>
      function setMultImageBorderWidth(){
         var imgBrdrWdthBtnWrap =
         document.getElementById("imgBrdrWdthBtnWrap");
         var imgBrdrWdthEl1 = document.getElementById("imgBrdr1");
         imgBrdrWdthEl1.style.borderImageWidth = "7px";
         imgBrdrWdthEl1.innerHTML = "border-image-width - <b>" +
         imgBrdrWdthEl1.style.borderImageWidth + "</b>";
         var imgBrdrWdthEl2 = document.getElementById("imgBrdr2");
         imgBrdrWdthEl2.style.borderImageWidth = "8px";
         imgBrdrWdthEl2.innerHTML = "border-image-width - <b>" +
         imgBrdrWdthEl2.style.borderImageWidth + "</b>";
         var imgBrdrWdthEl3 = document.getElementById("imgBrdr3");
         imgBrdrWdthEl3.style.borderImageWidth = "9px";
         imgBrdrWdthEl3.innerHTML = "border-image-width - <b>" +
         imgBrdrWdthEl3.style.borderImageWidth + "</b>";
         var imgBrdrWdthEl4 = document.getElementById("imgBrdr4");
         imgBrdrWdthEl4.style.borderImageWidth = "10px";
         imgBrdrWdthEl4.innerHTML = "border-image-width - <b>" +
         imgBrdrWdthEl4.style.borderImageWidth + "</b>";
      }
   </script>
</head>
<body>
   <h3> Set the widths of multiple image borders using the
      <i> borderImageWidth </i>property.
   </h3>
   <p id = "imgBrdr1"> </p>
   <p id = "imgBrdr2"> </p>
   <p id = "imgBrdr3"> </p>
   <p id = "imgBrdr4"> </p>
   <div id = "imgBrdrWdthBtnWrap">
      <p> Click on the button to view different border image widths on
      the color boxes </p>
      <button onclick = "setMultImageBorderWidth();"> View </button>
   </div>
</body>
</html>

In this tutorial, we went through the borderImageWidth property in JavaScript. This property is a built-in option in JavaScript to set the widths of the image border and is very easy to code.