outline-offset

Definition

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.

Examples

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;
}

Values

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