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:
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:
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