In this section, we will learn what the outline-offset property is and how to use it in CSS.

Click here to run the outline-offset property.

CSS outline-offset Property Definition and Usage

Other than content, padding and borders, an element has a line around itself that is known as the outline. By default, this line sits next to the border of an element.

But CSS has provided a property known as `outline-offset` by which we can change the default position of this outline and set it further from the element itself.

CSS outline-offset Property Syntax

outline-offset: length|initial|inherit;

CSS outline-offset Property Value

The value we set for the `outline-offset` property is used to make a distance between the outline of an element and its border. So, the value we set for this property is a number with any relative or absolute units supported in CSS.

Note: the two global values “initial” and “inherit” could also be used for this property.

Example: outline-offset in CSS

See the Pen outline-offset in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS outline-offset Property Work?

In this example, the value of the offset is set to 2em and that means the outline should take a distance of 2em from the border of the target element.