When we’re styling :focus states, we often use the outline property to override the browser’s default styling.

This works well, but the outline can feel very close to the text that’s outlined. Right click or [tab] to the link in this Codepen to see:

See the Pen (@websmyth) on CodePen.

To create more space, we could add padding on focused elements.

Alternatively, we could use outline-offset, a little-used property that creates some space between an element and its outline:

See the Pen (@websmyth) on CodePen.

Is it supported though?

Browser support is very good except for IE and pre-2016 versions of Edge.

Found this useful?

CSS For Designers is a practical guide to CSS, helping people bring their CSS knowledge up-to-date and learn how the language actually works.

Preview the course