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

JavascriptWeb DevelopmentFront End Scripts

To set the widths of the image border, use the borderImageWidth property in JavaScript.

Example

You can try to run the following code to learn how to set widths of the border as an image −

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 Width</button>
      <script>
         function display(){
            document.getElementById("box").style.borderImageWidth = "20px 30px";
         }
      </script>
   </body>
</html>
raja
Published on 26-Feb-2018 11:09:49
Advertisements