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
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.