~/css/outline-border-generator
CSS Outline and Border Generator
Combine a border and an outline on one element and see how they differ: set the width, style and colour of each, push the outline away with outline-offset, and round the corners. Ideal for designing visible focus rings.
Border
Outline
Using the CSS Outline & Border Generator
Border versus outline
A border is part of the box: it takes up space and pushes content inward. An outline is drawn outside the box and takes up no space at all, so adding or removing it never shifts the layout. That makes outlines the right tool for focus indicators and hover highlights.
Outline offset
outline-offset moves the outline away from the border (positive values) or inside it (negative values). A small gap of 2 to 4 pixels makes a focus ring stand out from the element itself, especially when the element and the ring share a colour.
Outlines follow rounded corners
Current browsers draw outlines that follow border-radius, so you no longer need box-shadow hacks for rounded focus rings.
Designing focus rings
Never remove focus outlines without a replacement: keyboard users need them to see where they are. Use :focus-visible so the ring appears for keyboard navigation but not on every mouse click, and keep it at least 2px with strong contrast.
Frequently asked questions
Why does my border change the element's size?
Borders add to the size unless you set box-sizing: border-box, which includes them in the declared width and height.
Can an outline have different sides?
No. Outlines are the same on all four sides. Use borders or box-shadow for per-side styling.
What makes a good focus ring?
At least 2px, a 3:1 contrast against the surrounding colours, and a small offset.