CSS Outline Generator

What this tool is used for

• Designing a visible focus indicator that meets contrast requirements.
• Producing an outline with an offset so it does not touch the element.
• Comparing outline styles for a focus state.
• Getting an outline that does not affect layout, unlike a border.
• Building a focus ring that works on both light and dark backgrounds.

Frequently Asked Questions

How is outline different from border?

An outline takes no space. Borders are part of the box model, so adding one shifts everything around it unless you compensate; an outline is painted outside the border edge and never affects layout. That is precisely why it is the right property for focus rings — nothing moves when focus arrives.

Does the outline follow border-radius?

Yes in every current browser — outlines became radius-aware in Chrome 94 and Firefox 88, around 2021. Before that they were always rectangular, which is why older codebases fake rounded focus rings with box-shadow. If you support genuinely old browsers, box-shadow is still the safer route.

What does a negative outline-offset do?

Draws the outline inside the element instead of around it. It is the standard trick for a focus ring on something flush against the viewport edge or clipped by an overflow: hidden ancestor, where a positive offset would be cut off and effectively invisible.

Is it ever acceptable to write outline: none?

Only if you replace it. Removing the focus indicator with nothing in its place fails WCAG 2.4.7 outright and makes the page unusable by keyboard. Style :focus-visible instead — it shows the ring for keyboard users and suppresses it for mouse clicks, which is what people actually want when they reach for outline: none.

Why do some styles look solid at small widths?

Because they need room. double draws two lines with a gap, so below 3px there is nothing to divide and it renders as one; groove and ridge need at least 2px to show their light and dark halves. dotted and dashed work at 1px but nearly vanish — 2px is the practical floor for a visible ring.

Common errors and gotchas

• Removing the default outline without providing a replacement, which breaks keyboard navigation.
• Choosing an outline colour that fails contrast against the background it appears on.
• Confusing outline with border, where only the border participates in layout.
• Using an offset large enough that the ring overlaps neighbouring controls.
• Styling only `:focus` and not `:focus-visible`, which shows the ring on mouse clicks too.