HTML DOM Style outlineOffset Property

HTML Web Development Front End Technology

The DOM style outlineOffset property returns and offsets the outline around an element in an HTML document.

Syntax

Following is the syntax −

Returning outlineOffset

object.style.outlineOffset

Modifying outlineOffset

object.style.outlineOffset = “value”

Example

Let us see an example of style outlineOffset property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   p {
      background-color: seagreen;
      height: 200px;
      width: 200px;
      outline: 3px solid #000;
      border: 3px solid #fff;
      margin: 1.5rem auto;
   }
   .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 outlineOffset Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add offset</button>
<script>
   function add() {
      document.querySelector('p').style.outlineOffset = "8px";
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Add offset” button to add offset outline around green box.

AmitDiwan

Updated on: 01-Jul-2020

22 Views

Kickstart Your Career

Get certified by completing the course

Get Started