CSS outline-offset
property is used to add a space between the outline and the border of an element. An outline is a line that is drawn outside the borders of an element for decoration purposes.
By default, there is no space between the outline and the border of the element.
The outline-offset
can be specified in any valid CSS length format. Try out the example below to see how it works:
Example:
.p1{ outline-offset: 10px; outline: 5px dashed blue; } .p2{ outline-offset: 20px; outline: 5px dashed blue; }
The outline-offset
property can also take a negative value. A negative value indicates that the outline will be inside the border of the element. Refer to the example below:
Example:
.p1{ outline-offset: -10px; outline: 5px dashed blue; } .p2{ outline-offset: -20px; outline: 5px dashed blue; }
CSS Syntax
The outline-offset
property has the below syntax:
outline-offset: length|initial|inherit;
Property Values
The outline-offset
property accepts the following values:
length | Specifies a gap between the outline and border of an element. It can be positive, negative, or zero. A negative value indicates that the outline will be inside the border of the element. The default value is 0. |
initial | Sets the outline-offset property to its default value(0). |
inherit | Inherits the outline-offset property from the parent element. |
General Info
Default Value | 0 |
Inherited | No |
JavaScript Usage | element.style.outlineOffset = “20px”; |