CSS outline-offset Property

What You’ll Learn

The outline-offset property controls the gap between an element and its outline. It is especially helpful for cleaner focus rings and clearer visual separation.

Introduction

The outline-offset property in CSS allows you to specify the space between an element’s outline and its border or edge.

This property is particularly useful when you want to create a clear visual distinction between the outline and the content of an element, enhancing the element’s focus style or visual appearance.

Definition and Usage

Use a positive offset to push the outline outward and create breathing room. This is common for buttons, links, and form controls that need a visible keyboard focus ring.

You must already have a visible outline before outline-offset has any effect.

📝 Syntax

The syntax for the outline-offset property is simple. You can define it with a length value that determines the distance between the outline and the element’s edge.

element {
  outline-offset: <length>;
}

Here, the value is a length such as pixels (px), em units (em), or any other valid CSS length unit.

Basic Example

button {
  outline: 2px solid blue;
  outline-offset: 5px;
}

Syntax Rules

• Accepts length values such as px, em, and rem.
• Positive values move the outline away from the element edge.
• Negative values can move the outline inward in supporting browsers.
• Requires a visible outline set with outline or its longhand properties.

🎯 Default Value

The default value of the outline-offset property is 0, meaning the outline is directly adjacent to the element’s border or edge.

Increase the value when you want visible space between the element and its focus ring.

💎 Property Values

Example Usage

Apply positive offsets for focus rings, compare spacing, and try negative values.

<style>
  button {
    outline: 2px solid blue;
    outline-offset: 5px;
  }
</style>

<button>Click Me!</button>

a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.badge {
  outline: 2px solid #9333ea;
  outline-offset: -3px;
}

.card--selected {
  outline: 2px solid #16a34a;
  outline-offset: 8px;
}

Works with the outline properties

outline-offset does not create an outline by itself. Combine it with outline, outline-width, outline-style, and outline-color.

button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 4px;
}

♿ Accessibility

• Improve focus visibility — A small positive offset can make focus rings easier to see.
• Do not remove focus styles — Offset spacing should enhance focus, not replace it.
• Maintain contrast — Ensure the outline color still stands out after adding offset.
• Test keyboard navigation — Verify the ring remains visible on all interactive elements.

💡 Best Practices