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


To set outline properties, use the outline property. It allows you to set the color, style, and offset of the outline.

Example

You can try to run the following code to set all the outline properties in one declaration with JavaScript −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 450px;
            background-color: orange;
            border: 3px solid red;
         }
      </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>
         <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</button>
      <br>
      <script>
         function display() {
            document.getElementById("box").style.outline = "thick solid #5F5F5F";
         }
      </script>
   </body>
</html>

Monica Mona
Monica Mona

Student of life, and a lifelong learner

Updated on: 23-Jun-2020

86 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements