Generate CSS outline code instantly. Adjust style, width, color, and offset — see the live preview update in real time, then copy the ready-to-use CSS.
Presets
Controls
Live Preview
Outline
outline
CSS Output
Focus State CSS (Accessibility)
Use :focus-visible for keyboard-only focus rings (WCAG 2.4.11 recommendation). Minimum 3:1 contrast ratio required.
Tip: Unlike
border, outline does not affect layout — it draws outside the element without shifting surrounding content. Use outline-offset to create a gap between element and outline.How to Use
- Choose an outline-style from the dropdown — solid, dashed, dotted, double, and more.
- Drag outline-width to set thickness (1–20 px).
- Pick an outline-color from the color picker or type a hex value.
- Adjust outline-offset to push the outline away from (or inside) the element boundary.
- Enable Compare with border to see the layout difference side by side.
- Enable Focus state preview to see how the outline looks as a focus ring.
- Click Copy CSS to copy the generated code.
Outline vs. Border — Key Differences
| Property | Affects layout | Follows border-radius | Offset support |
|---|---|---|---|
outline | No | Partially | Yes (outline-offset) |
border | Yes | Yes | No |
Because outline does not affect layout, it is ideal for focus indicators — adding a visible ring around focused elements without causing content reflow.
Accessibility Tips
- WCAG 2.4.11 (AA, WCAG 2.2) requires focus indicators to have a contrast ratio of at least 3:1 against adjacent colors.
- Use
:focus-visibleinstead of:focusto show rings only for keyboard navigation, not mouse clicks. outline-offsetof 2–4 px improves legibility on rounded elements.- Never use
outline: nonewithout providing an alternative focus style.