Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Style outlineOffset Property

  • Last Updated : 22 Nov, 2021

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: 

ValueDescription
lengthDefine length in length unit.
initialdefine initial value which is default.
inheritInherit 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: 

  • Internet Explorer
  • Google Chrome
  • Firefox
  • Opera
  • Apple Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!