Border as focus state

How to use it

Add a border around an element and make it obvious, when that element is focused.

When to use it

If you want to create a focus state for elements like buttons, for example when someone is tabbing between elements, you can use a border. The style I see most often is a soft blue border, which is what I've recreated below.

You could make this a brand colour, however, if you wanted to add more of those to your design.

What to watch out for

The focus state should stand out, and be obvious, since it shows the user where the input focus has moved to. Depending on how the website is built, the next element to get focus might not be the closest element, so obvious focus states are important.

Examples