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.