CSS | outline-offset Property

The CSS outline-offset Property sets the amount of space between an outline and the edge or border of an element.

An outline is a line drawn around elements outside the border edge. The space between the element and its outline is transparent. Also, the outline may be non-rectangular. The default value is 0.

Syntax



outline-offset: length|initial|inherit;

Property values:

  • length: It is the distance or space between the outline and the border i.e it is the distance the outline is outset from the border edge. It can also have negative value. If length is negative then the outline is placed inside the element. If length is 0 then there is no space between the outline and the element.
    syntax:

    outline-offset: 5px;
    

    Example 1:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            outline-offset Property
        </title>
        <style
            div {
                margin: 30px;
                border: 2px solid blue;
                background-color: yellow;
                outline: 4px dashed red;
                outline-offset: 15px;
            
        </style>
    </head>
      
    <body>
        <div >GeeksForGeeks</div>
        <br>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

    Example 2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            outline-offset Property
        </title>
        <style
            div {
                margin: 10px;
                border: 2px solid red;
                background-color: blue;
                outline: 4px solid black;
                outline-offset: 5px;
            
        </style>
    </head>
      
    <body>
        <div >GeeksForGeeks</div>
        <br>
    </body>
    </html>                    

    chevron_right

    
    

  • Output:

  • initial: It sets the outline-offset property to its default value.
    syntax:

    outline-offset: initial;
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            outline-offset Property
        </title>
        <style>
            div {
                margin: 30px;
                border: 2px solid blue;
                background-color: yellow;
                outline: 4px dashed red;
                outline-offset: initial;
            }
        </style>
    </head>
      
    <body>
        <div>GeeksForGeeks</div>
        <br>
    </body>
      
    </html

    chevron_right

    
    

  • Output:

  • inherit: The element inherits the outline-offset property from its parent element.

    syntax:

    outline-offset: inherit;
    

Supported Browsers: The browsers supported by outline-offset Property arelisted below:

  • Google Chrome 4.0
  • Internet Explorer 15.0
  • Opera 10.5
  • Firefox 3.5
  • Apple Safari 3.1


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.