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

How to set all the outline properties in one declaration with JavaScript?

Javascript Web Development Front End Scripts

To set outline properties, use the outline property. It allows you to set the color, style, and width of the outline in one declaration with JavaScript.

Syntax

The outline property accepts up to three values in any order:

element.style.outline = "width style color";

Parameters

  • outline-width: thin, medium, thick, or specific value (px, em, etc.)
  • outline-style: none, solid, dotted, dashed, double, groove, ridge, inset, outset
  • outline-color: color name, hex code, rgb(), or rgba()

Example

Click the button to apply an outline to the orange box:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        width: 450px;
        padding: 20px;
        background-color: orange;
        border: 3px solid red;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <p>Click below to add Outline.</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>
    </div>
    <button type="button" onclick="setOutline()">Set Outline</button>
    <button type="button" onclick="removeOutline()">Remove Outline</button>
    
    <script>
      function setOutline() {
        document.getElementById("box").style.outline = "thick solid #5F5F5F";
      }
      
      function removeOutline() {
        document.getElementById("box").style.outline = "none";
      }
    </script>
  </body>
</html>

Multiple Outline Examples

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo-box {
        width: 200px;
        height: 80px;
        background-color: lightblue;
        margin: 15px;
        padding: 10px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="demo-box" id="box1">Box 1</div>
    <div class="demo-box" id="box2">Box 2</div>
    <div class="demo-box" id="box3">Box 3</div>
    <br>
    <button onclick="applyOutlines()">Apply Different Outlines</button>
    
    <script>
      function applyOutlines() {
        // Thick solid gray outline
        document.getElementById("box1").style.outline = "thick solid #333";
        
        // Medium dashed red outline
        document.getElementById("box2").style.outline = "medium dashed red";
        
        // Thin dotted blue outline
        document.getElementById("box3").style.outline = "thin dotted blue";
      }
    </script>
  </body>
</html>

Key Points

  • The outline property is a shorthand for outline-width, outline-style, and outline-color
  • Unlike borders, outlines don't take up space and don't affect layout
  • Outlines appear outside the border and can overlap other elements
  • Values can be specified in any order
  • Use outline: none to remove outlines

Conclusion

The outline property provides a convenient way to set all outline properties in one declaration. Use it for focus indicators, debugging layouts, or highlighting elements without affecting document flow.

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

215 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements