CSS Outline Generator

It is a CSS pseudo-class that matches an element with focus ONLY when the browser thinks a focus indicator should be shown, which is basically keyboard navigation, NOT mouse clicks. Modern UX best practice is to show the outline ring for Tab-key users (needed for orientation) and hide it for click users (they already know what they clicked). Universal browser support since 2021.

Outline: drawn OUTSIDE the border edge, does NOT take up space (does not shift layout), can be offset, supports outline-offset. Border: part of the box model, occupies space, can have different colors per side, supports border-radius natively. Outline is decoration and an accessibility ring; border is a structural edge.

Yes, as of 2024 in Chrome 94+, Firefox 88+, and Safari 16+. Before that, outlines drew as rectangles around rounded corners. By 2026 the legacy rectangle behavior only affects users on browsers older than two years.

WCAG 2.4.7 (Level AA) requires VISIBLE focus indicators on all interactive elements. WCAG 1.4.11 (non-text contrast, AA) requires at least 3:1 contrast against adjacent colors. WCAG 2.4.11 (AAA, new in 2.2) adds an explicit minimum: 2 CSS pixels thick AND at least 3:1 contrast against the unfocused state. The Accessibility Strong preset (4px double) exceeds all three.

It makes the outline color follow the element’s text color automatically. For example, a button with color: white on dark theme and color: black on light theme can use outline: 2px solid currentColor so the outline matches the theme without writing two separate rules. Great for theming.

Yes. Negative values pull the outline INWARD, overlapping the element instead of sitting outside. A common use case is showing focus on absolutely-positioned elements where outward offset would clip against parent overflow. Browser support is universal.

Only if you immediately replace it with something else visible, either an alternative focus indicator (box-shadow ring, background change) or a different outline applied later (for example on :focus-visible). * { outline: none } with no replacement breaks keyboard navigation for everyone and is a WCAG 2.4.7 violation.

Both work and neither shifts layout. Outline respects border-radius (in modern browsers) and has simpler syntax. box-shadow works as an inset shadow too (inner ring), supports multiple stacked rings (for example a white halo plus a colored ring), and allows blur for a softer look. Outline is the standard; box-shadow is for when you need stacked or blurred rings.

Yes. Settings, colors, and selector all stay in your browser. Nothing is uploaded.