HTML | DOM Style outlineOffset Property

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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>   

    chevron_right

    
    

    Output:

    • Before clicking the buttom:

    • 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 Posts:

      Article Tags :

      Be the First to upvote.


      Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.