Open In App

CSS outline-offset Property

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

html




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


Output:

  

Example 2: 

html




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


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

syntax:

outline-offset: initial;

Example 3: 

html




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


  • 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 are listed below:

  • Google Chrome 1.0 and above
  • Edge 15.0 and above
  • Opera 9.5 and above
  • Firefox 1.5 and above
  • Apple Safari 1.2 and above


Last Updated : 02 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads