CSS outline-offset Property

The outline-offset property specifies the space between an outline and the border edge of an element.

The outline-offset is not a part of the outline shorthand property. It must be specified separately.

Initial Value 0
Applies to All elements.
Inherited No.
Animatable Yes. Width of space is animatable.
Version CSS3
DOM Syntax object.style.outlineOffset = "20px";

Syntax

outline-offset: length | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div.ex1 {
      margin: 20px;
      border: 2px dotted #000;
      background-color: #8ebf42;
      outline: 4px solid #666;
      outline-offset: 10px;
      }  
    </style>
  </head>
  <body>
    <h2>Outline-offset property example</h2>
    <div class="ex1">The outline-offset is 10px</div>
  </body>
</html>

In the given example the space between outline and the border is 10px.

Values

Value Description
length Space between outline and the border edge of an element. The default value is 0.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.


Practice Your Knowledge

The outline-offset property specifies the space between




Related articles