1. css
  2. /properties
  3. /outline-offset



The outline-offset property in CSS is used to set the distance between the outline of an element and its border. This property is used to create space between the element's outline and its border, and can be used to create a variety of visual effects.


Set the outline offset to 5px:

.example {
  outline-offset: 5px;

Set the outline offset to a negative value:

.example {
  outline-offset: -10px;

Set the outline offset to 0:

.example {
  outline-offset: 0;


lengthSpecifies the distance between the outline and the border of an element, as a length value (e.g. pixels or ems). The default value is 0.
initialResets the property to its default value.

Best Practices

  • Use outline-offset sparingly and only when necessary, as it can affect the visual balance of your layout.
  • Consider using a positive outline-offset value to create a halo effect around an element's outline, or a negative value to create a border that overlaps with the element's content.
  • Test the outline-offset property in different browsers to ensure consistent behavior.
  • Be aware that some older browsers may not support this property or may require vendor prefixes.
  • Use outline-offset in combination with other outline-related properties, such as outline-color, outline-style, and outline-width, to create a complete outline around an element.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
inheritInherits the property from its parent element.