HTML DOM Style outlineStyle Property

HTMLWeb DevelopmentFront End Technology

The DOM style outlineStyle property returns and modify the style of the outline around an element in an HTML document.


Following is the syntax −

  • Returning outlineStyle
  • Modifying outlineStyle = “value”


Let us see an example of style outlineStyle property −

 Live Demo

<!DOCTYPE html>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   p {
      background-color: seagreen;
      height: 200px;
      width: 200px;
      outline: 2px solid #000;
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
<h1>DOM Style outlineStyle Property Example</h1>
<button onclick="add()" class="btn">Add outline</button>
   function add() {
      document.querySelector('p').style.outlineStyle = "dashed";


This will produce the following output −

Click on “Add outline” button to change the style of the outline around green box.

Published on 23-Jul-2019 10:28:58