Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set the style of the outline around an element with JavaScript?

Javascript Web Development Front End Scripts

To set the outline style around an element in JavaScript, use the outlineStyle property. This property controls the visual appearance of the outline, which is drawn outside the border and doesn't affect the element's dimensions.

Syntax

element.style.outlineStyle = "value";

Common Outline Style Values

The outlineStyle property accepts these values:

  • solid - A solid line
  • dotted - A series of dots
  • dashed - A series of dashes
  • double - Two solid lines
  • groove - A 3D grooved outline
  • ridge - A 3D ridged outline
  • none - No outline (default)

Example: Setting Different Outline Styles

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 450px;
            background-color: orange;
            border: 3px solid red;
            margin: 20px;
            padding: 15px;
         }
         button {
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <p>Click buttons to change the outline style:</p>
      <div id="box">
         <p>This is a div element with a red border. The outline will appear outside this border.</p>
      </div>
      
      <button onclick="setSolid()">Solid</button>
      <button onclick="setDotted()">Dotted</button>
      <button onclick="setDashed()">Dashed</button>
      <button onclick="setDouble()">Double</button>
      <button onclick="removeOutline()">Remove</button>

      <script>
         const box = document.getElementById("box");
         
         function setSolid() {
            box.style.outlineStyle = "solid";
            box.style.outlineWidth = "3px";
            box.style.outlineColor = "#5F5F5F";
         }
         
         function setDotted() {
            box.style.outlineStyle = "dotted";
            box.style.outlineWidth = "4px";
            box.style.outlineColor = "blue";
         }
         
         function setDashed() {
            box.style.outlineStyle = "dashed";
            box.style.outlineWidth = "3px";
            box.style.outlineColor = "green";
         }
         
         function setDouble() {
            box.style.outlineStyle = "double";
            box.style.outlineWidth = "5px";
            box.style.outlineColor = "purple";
         }
         
         function removeOutline() {
            box.style.outlineStyle = "none";
         }
      </script>
   </body>
</html>

Setting Multiple Outline Properties

You can set outline style along with width and color for better visual effects:

<!DOCTYPE html>
<html>
   <body>
      <div id="myDiv" style="width: 200px; height: 100px; background: lightblue; margin: 20px;">
         Sample Element
      </div>
      
      <button onclick="addOutline()">Add Complete Outline</button>
      
      <script>
         function addOutline() {
            const element = document.getElementById("myDiv");
            element.style.outlineStyle = "solid";
            element.style.outlineWidth = "4px";
            element.style.outlineColor = "red";
            element.style.outlineOffset = "5px";  // Space between border and outline
         }
      </script>
   </body>
</html>

Key Points

  • Outlines don't take up space and don't affect layout
  • Outlines appear outside the element's border
  • Use outlineOffset to control spacing between border and outline
  • Setting outlineStyle to "none" removes the outline

Conclusion

The outlineStyle property provides flexible styling for element outlines. Use it with outlineWidth and outlineColor for complete outline customization that doesn't affect page layout.

Updated on: 2026-03-15T23:18:59+05:30

309 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements