CSS outline-offset

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

By default, the outline is drawn just outside the border edge of an element. This property allows you to create space between the outline and the border.

Let's take a look at an example:

    <div style="border: 2px solid blue; outline: 4px solid red; outline-offset: 10px;">
      Example Element
    </div>
  

In this example, we have a <div> element with a blue border, a red outline, and an outline-offset of 10px. The outline is offset from the border by 10px.

The outline-offset property can take any length value, such as pixels, ems, or percentages.

It is important to note that the outline property must be set for the outline-offset property to take effect.

Feel free to experiment with different values for the outline-offset property to see how it affects the spacing between the outline and the border of an element.