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

To set the amount by which the border image is extended, you need to set border outside edges.

Example

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.

Live Demo

<!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>

Paul Richard

Published on 26-Feb-2018 11:12:27

Previous Page Print Page