Skip to content
Related Articles

Related Articles

HTML | DOM Style outlineOffset Property

Improve Article
Save Article
  • Last Updated : 08 Aug, 2022
Improve Article
Save Article

The Style outlineOffset property is used for offsetting an outline and draw it beyond the border edge. 
Outlines do not take space, unlike borders. It returns a string which represents the outline-offset property of an element.

Syntax: 

  • To get the property 
object.style.outlineOffset
  • To set the property 
object.style.outlineOffset = "length|initial|inherit"

Property values: 

Value Description
length Define length in length unit.
initial define initial value which is default.
inherit Inherit property from parent element

Below program illustrates the Style outlineOffset property method:

Example: 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Style outlineOffset Property in HTML</title>
    <style>
        #samplediv {
            margin: auto;
            border: 2px green;
            outline: coral solid 4px;
            width: 250px;
            height: 50px;
        }
         
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Style outlineOffset Property</h2>
    <br>
     
<p>
      For moving the ouline border outside
      the border edge, double click the
      "Change Outline Border" button:
    </p>
 
    <br>
    <button ondblclick="outline()">
        Change Outline Border
    </button>
    <div id="samplediv">
        <h1>Geeksforgeeks</h1>
    </div>
    <script>
        function outline() {
            document.getElementById("samplediv")
                .style.outlineOffset = "20px";
        }
    </script>
</body>
</html>  


Output: 

  • Before clicking the button: 

  • After clicking the button: 

Supported Browsers: The browser supported by HTML | DOM Style outlineOffset Property are listed below: 

  • Google Chrome 1
  • Edge 15
  • Firefox 1.5
  • Opera 9.5
  • Apple Safari 1.2

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!