How to Create CSS Outlines and Focus Styles
CSS outline is an underappreciated property that's essential for accessibility. It draws a line around an element without affecting layout — unlike border, which adds to the element's size. Outlines are the standard way to indicate keyboard focus, and customizing them properly ensures your site is both accessible and visually polished.
- Style CSS outlines for focus indicators, decorative borders, and accessibility.
- Covers outline vs border.
- Covers wcag-compliant focus styles.
- Covers custom focus ring techniques.
- Covers never remove outlines without replacement.
Outline vs Border
Border is part of the box model — it adds to the element's dimensions and affects layout. Outline sits outside the border and doesn't affect size or position. Border follows border-radius; outline is rectangular by default (though modern browsers now support outline rounding in most cases). Use border for decorative styling, outline for focus indicators.
WCAG-Compliant Focus Styles
WCAG requires visible focus indicators for keyboard navigation. The default browser outline works but is often too subtle:
transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and skip expensive layout recalculations.:focus-visible {
outline: 2px solid #00FFD1;
outline-offset: 3px;
}
:focus-visible only shows the outline for keyboard navigation (not mouse clicks), which is what users expect. The outline-offset creates space between the element and the outline, preventing visual cramping. The CSS Outline Generator lets you preview different outline styles and offsets.
Custom Focus Ring Techniques
For rounded focus rings that follow border-radius, use box-shadow instead of outline:
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 255, 209, 0.5);
}
This creates a soft glow ring that respects border-radius. The downside is that box-shadow doesn't show in Windows High Contrast Mode — so always include a transparent outline as a fallback:
:focus-visible {
outline: 2px solid transparent;
box-shadow: 0 0 0 3px rgba(0, 255, 209, 0.5);
}
Never Remove Outlines Without Replacement
outline: none or outline: 0 without a visible replacement is an accessibility violation. Keyboard users rely on focus indicators to know where they are on the page. If the default outline doesn't match your design, replace it — don't remove it.
Frequently Asked Questions
What is the difference between outline and border?
How do I make accessible focus styles?
Why use :focus-visible instead of :focus?
Use the CSS Outline Generator — free, no signup required.
⚡ Open CSS Outline Generator