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

Javascript Web Development Front 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 −

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

Sharon Christine

Published on 26-Feb-2018 11:09:49

Previous Page Print Page Next Page