The outline-offset property controls the distance between an element's outline and its border edge. Here's how to use it.
Basic Usage#
Loading code block...
Focus Indicators#
Loading code block...
Link Styling#
Loading code block...
Cards and Containers#
Loading code block...
Form Elements#
Loading code block...
Buttons#
Loading code block...
Animation and Transitions#
Loading code block...
High Contrast Mode#
Loading code block...
Images and Media#
Loading code block...
Negative Offset Uses#
Loading code block...
Skip Links#
Loading code block...
Custom Focus Styles#
Loading code block...
Dark Mode#
Loading code block...
Best Practices#
Accessibility:
✓ Use :focus-visible for keyboard
✓ Sufficient contrast ratio
✓ Minimum 2px outline width
✓ Visible in all color modes
Positioning:
✓ Positive offset for clarity
✓ Negative offset for tight spaces
✓ Consider border-radius
✓ Account for spacing
Animation:
✓ Respect prefers-reduced-motion
✓ Keep transitions short
✓ Subtle offset changes
✓ Don't delay visibility
Avoid:
✗ Removing focus outlines
✗ Very thin outlines
✗ Low contrast colors
✗ Hiding focus states
Conclusion#
The outline-offset property provides precise control over focus indicator positioning. Use positive values to create space between the element and its outline, negative values for inset effects, and combine with transitions for smooth animations. Always ensure focus indicators are visible and meet accessibility guidelines - typically at least 2px width with sufficient color contrast.