Skip to content
Related Articles

Related Articles

HTML | DOM Style outlineOffset Property
  • Last Updated : 14 Nov, 2019

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.


  • To get the property
  • To set the property = "length|initial|inherit"

    Property values:

    lengthDefine length in length unit.
    initialdefine initial value which is default.
    inheritInherit property from parent element

    Below program illustrates the Style outlineOffset property method:


    <!DOCTYPE html>
        <title>Style outlineOffset Property in HTML</title>
            #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;
        <h2>Style outlineOffset Property</h2>
        <p>For moving the ouline border outside the border edge, double click the "Change Outline Border" button: </p>
        <button ondblclick="outline()">
            Change Outline Border
        <div id="samplediv">
            function outline() {
                    .style.outlineOffset = "20px";


    • 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 Articles
    Page :