How to set the image to be used as a border with JavaScript?

JavascriptObject Oriented ProgrammingFront End Technology

To set the image to be used as a border in JavaScript, use the borderImageSource to add an image.

Example

You can try to run the following code to learn how to work with borderImageSource property to set the image as a border −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color:blue;
            border: 40px dashed;
            border-image: url('https://www.tutorialspoint.com/images/neo4j.png');
            border-image-slice: 50;
            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 Inward Offsets</button>
      <script>
         function display() {
            document.getElementById("box").style.borderImageSource = "url('https://www.tutorialspoint.com/images/bugzilla.png')";
         }
      </script>
   </body>
</html>
raja
Published on 27-Feb-2018 15:09:24
Advertisements