How to offset an outline and draw it beyond the border edge with JavaScript?

JavascriptWeb DevelopmentFront End Scripts

To offset an outline, use the outlineOffsetproperty. It allows you to draw the outline beyond the border edge.

You can try to run the following code to offset an outline and draw it beyond the border edge with JavaScript.

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 450px;
            background-color: orange;
            border: 3px solid red;
            margin-left: 20px;
         }
      </style>
   </head>
   <body>
      <p>Click below to add Outline Offset.</p>
      <div id="box">
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
      </div>
      <br>
      <button type="button" onclick="display()">Set Outline Offset</button>
      <br>
      <script>
         function display() {
            document.getElementById("box").style.outline = "thick solid";
            document.getElementById("box").style.outlineColor = "#5F5F5F";
            document.getElementById("box").style.outlineOffset = "7px";
         }
      </script>
   </body>
</html>
raja
Published on 27-Feb-2018 14:13:09
Advertisements