CSS outline generator — visible focus rings and outlines that don't shift layout

How to use the CSS outline generator

1. Set the Width (0–16 px) and pick a Style: solid, dashed, dotted, double, groove, ridge, inset or outset.
2. Choose a Colour and an Offset from −10 to 20 px.
3. Set the Element radius so the preview matches your button or input.
4. Keep Only on keyboard focus (:focus-visible) ticked for a focus ring, or untick it for a permanent outline. Set Background next to the outline to your page colour for the contrast check.
5. Copy the CSS and replace .element with your selector.

What it does and when to use it

The most important use of outline is the focus indicator: the ring that shows which link, button or field the keyboard is on. Browser defaults are often thin or clash with a brand, and many sites remove them without a replacement, which leaves keyboard users lost. This tool writes a clear, on-brand ring that appears for keyboard focus but not after every mouse click.

Unticked, it makes a permanent outline, handy for debugging layout, highlighting a selected card, or a dashed “drop files here” area. For full button styles that already include a focus ring, use the CSS button generator. To test ring colours against several backgrounds, try the contrast grid, and for a soft glow instead of a line, the box shadow generator.

How it works

The output has two rules. The base .element rule sets your border radius. The second rule, .element:focus-visible or plain .element, sets outline: <width> <style> <colour> and outline-offset. After building it, the tool measures the contrast between your colour and the background you set (white by default) and warns below 3:1.

MDN lists outline as Baseline widely available since March 2023, outline-offset since April 2017 and :focus-visible since March 2022.

Worked examples

Default focus ring:

.element:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

A permanent dashed outline. 2 px dashed red, offset 0, focus unticked: .element { outline: 2px dashed #ff0000; … }. Colour names are written back as hex.

A ring that is too pale. 2 px #93c5fd, offset −4 px, gives the warning “The outline has 1.80:1 contrast against white; focus indicators should reach 3:1 against adjacent colours (WCAG 1.4.11).” A darker blue such as the default #2563eb passes.

Limits and tips

• The contrast check uses one background colour. Set it to the colour beside the ring; for a negative offset that is the element’s own background.
• Width 0 removes the outline entirely, so do not use it on a focus rule.
• Groove, ridge, inset and outset shade the outline from its colour, and the exact look differs between browsers.