How to set whether the image-border should be repeated, rounded or stretched with JavaScript?

JavascriptWeb DevelopmentFront End Scripts

Use the borderImageRepeat property to set whether the image-border is to be repeated, rounded, or stretched.

Example

You can try to run the following code to learn how to set whether image-border is to be repeated, rounder or stretched −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div{
            background-color: blue;
            border: 30px solid;
            border-image: url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg');
            border-image-slice: 10 10 30 30;
            border-image-width: 1 1 1 1;
            border-image-repeat: stretch;
         }
      </style>
   </head>
   <body>
      <div id="box">
         <p>
            Demo Text!
         </p>
      </div>
      <button onclick="display()">Click me!</button>
      <script>
         function display() {
            document.getElementById("box").style.borderImageRepeat = "round";
         }
      </script>
   </body>
</html>
raja
Published on 27-Feb-2018 10:47:09
Advertisements