How to set the amount by which the border image area extends beyond the border box with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to set a number up by which the border image area extends beyond the border box in JavaScript. To set the amount by which the border image is extended, you need to set the border outside edges. To do this we can apply the borderImageOutset style property provided in JavaScript.

After creating a border image area for the HTML element, we might have to increase the area. By knowing a method to increase the border image area more than the border box, we can make the change without writing lengthy code.

Using the borderImageOutset Property

The borderImageOutset property allows us to set the number to which the border image area extends. This property is also used in CSS as a "border-image-outset" property and provides similar output.

Syntax

We will use the on-click function to change the border image area. There are different property values required in this. We can add one to four values. These values are seen on the border image area's top, right, bottom, and left sides.

If you add only one value, it will be considered the same for all sides. If you add three values, the left side will be considered the same as the right side.

let img = document.getElementById("img");
function(){   
   img.style.borderImageOutset = "1px 2px 1px 2px"; 
}

Algorithm

Step 1 − Create a div or tag in the HTML document to set its border image.

Step 2 − Set the border image and width in the CSS file.

Step 3 − Create a button in HTML that can be used to change the border image with the on-click function.

Step 4 − Use the document.getElementById() method to set a variable name for the element.

Step 5 − Create the function for the button and set the number using style.borderImageOutset property.

Example 1

You can try to run the following code to learn how to set the amount by which the border image extends beyond the border box in JavaScript.


<!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 Border Oustside Edges</button> 
   <script> 
      function display(){ 
         document.getElementById("box").style.borderImageOutset =  
         "5px 10px 20px 15px"; 
      } 
   </script> 
</body> 
</html>

Example 2

Here we have created an element in HTML to set its border image. Then, we set its border and image specifications in CSS. In JavaScript, we got access to the element using a document.getElementById() method.

To set the number to which the border image area extends, we have used the style.borderImageOutset property in the button's on-click function().


<html> 
<head> 
   <style> 
      #boximg{ 
         background-color:gray; 
         border: 30px solid; 
         border-image: url('https://www.tutorialspoint.com/images/neo4j.png'); 
      } 
   </style> 
</head> 
<body> 
   <h3>Using <i>borderImageOutset"</i> property in JavaScript</h3> 
   <div id = "boximg"> 
   </div> 
   <button onclick = "border()"> Extend Border Image Area </button>  
   <script> 
      let img = document.getElementById("boximg"); 
      function border(){ 
         img.style.borderImageOutset = "2px 2px 70px 5px"; 
      } 
   </script>  
</body> 
</html>

Example 3

Using if, else statements with borderImageOutset Property

We have created a border image for the input area in this example. Since every input area requires a different length, you can set the number using borderImageOutset property and if and else statements to ensure the border image area extends when required.


<html> 
<head> 
   <style> 
      #img{ 
         background-color:gray; 
         border: 40px solid; 
         border-image: url('https://www.tutorialspoint.com/images/neo4j.png'); 
      } 
   </style> 
</head> 
<body> 
   <div id = "img"> 
   <button onclick = "borderinc()"> Extend </button> 
   <script> 
      let img = document.getElementById("img"); 
      function borderinc(){ 
         var num = 20; 
         if(num > 10) { 
            img.style.borderImageOutset = '10px';
         } 
         else { 
            img.style.borderImageOutset = '5px'; 
         }
      } 
   </script> 
</body> 
</html>

The above-mentioned examples are commonly used in JavaScript to set a number up to which border image area extends beyond the box in JavaScript. You can use borderImageOutset with other properties to change the element's style in JavaScript.