CSS outline-offset Property

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:

lengthSpecifies 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.
initialSets the outline-offset property to its default value(0).
inheritInherits the outline-offset property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.outlineOffset = “20px”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment