CSS - outline-offset Property

Quiz

CSS outline-offset property is used to specify the space between an outline and the border edge of an element. The space between the outline and the element is transparent.

Syntax

outline-offset: length | initial | inherit;

Property Values

Value	Description
length	The gap between the edge of an element and the outline is set using length units (e.g. px, em, rem etc.)
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Outline Offset Property

The following examples explain the outline-offset property with different values.

Outline Offset Property with Px Values

To set the gap between an element and its outline, we can specify the gap length using length units (e.g. px, rem, cm etc.). In the following example, px values have been used.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    .example {
      margin: 20px;
      padding: 10px;
      text-align: center;
      border: 4px dashed #000;
      background-color: #08ff90;
      outline: 4px solid #666;
      
    }
    .ex1{
      outline-offset: 7px;
    }
    .ex2{
      outline-offset: 10px;
    }
  </style>
</head>
<body>
  <h2>
    CSS outline-offset property
  </h2>
  <h4>
    outline-offset: 7px
  </h4>
  <div class="example ex1">
    The outline-offset is 7px
  </div>
  <h4>
    outline-offset: 10px
  </h4>
  <div class="example ex2">
    The outline-offset is 10px
  </div>
</body>
</html>

Outline Offset Property with Em Value

To set the gap between an element and its outline, we can specify the gap length using length units (e.g. px, rem, cm etc.). In the following example, em value has been used.

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .example {
      margin: 20px;
      padding: 10px;
      text-align: center;
      border: 4px dashed #000;
      background-color: #08ff90;
      outline: 4px solid #666;
      outline-offset: 1em;
    }
        
  </style>
</head>
<body>
  <h2>
    CSS outline-offset property
  </h2>
  <h4>
    outline-offset: 1em
  </h4>
  <div class="example ex1">
    The outline-offset is 1em
  </div>
</body>
</html>

Supported Browsers

Property
outline-offset	4.0	15.0	3.5	3.1	10.5

css_reference.htm

Print Page