Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM Style outlineStyle Property


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

Syntax

Following is the syntax −

  • Returning outlineStyle

object.style.outlineStyle
  • Modifying outlineStyle

object.style.outlineStyle = “value”

Example

Let us see an example of style outlineStyle property −

<!DOCTYPE html>
<html>
<head>
<style>
   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;
   }
</style>
</head>
<body>
<h1>DOM Style outlineStyle Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add outline</button>
<script>
   function add() {
      document.querySelector('p').style.outlineStyle = "dashed";
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Style outlineStyle Property

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

HTML DOM Style outlineStyle Property