Focus rings & more

CSS Outline Style Generator

Preview and customize outline style, width, color and offset — great for building accessible focus states — then copy the CSS.

Focusable element
Ready-to-use CSS

How it works

1

Pick a style

Choose from solid, dashed, dotted, double, groove or ridge.

2

Adjust width, color and offset

Fine-tune thickness, color and the gap between element and outline.

3

Copy the CSS

Get a ready-to-paste outline declaration, ideal for :focus states.

FAQ

What is the difference between outline and border?

Outline is drawn outside an element's border and does not take up layout space or affect box size, while border is part of the box model and does affect layout.

Why is outline important for accessibility?

A visible outline on :focus is essential for keyboard users to see which element is currently focused; removing it entirely without a replacement harms accessibility.

What does outline-offset do?

It adds a gap between the element's edge and the outline itself, which can make the outline easier to see against a busy background.

Try other tools

BRDCSS Border Pattern GeneratorPreview border styles. RBorder Radius GeneratorShape and copy rounded corners. AaFont Size Accessibility TesterPreview text at different sizes.