CSS | outline-offset Property - GeeksforGeeks

09 Aug, 2019
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:<!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:<!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>                    Output:
outline-offset: 5px;

Example 1:
<!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:
<!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>                    
Output:
initial: It sets the outline-offset property to its default value.syntax:outline-offset: initial;
Example:<!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> Output:
outline-offset: initial;

Example:
<!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> 
Output:
inherit: The element inherits the outline-offset property from its parent element.syntax:outline-offset: inherit;

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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
Picked
Technical Scripter 2018
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?