Skip to main content

Cleaner focus outlines with box-decoration-break

Posted in CSS

Until the week before last, my site’s form input focus styling was a bit all over the place, so I spent some time designing a consistent style for form inputs, including buttons. I settled upon:

  • a black outline in Light Mode
  • a white outline in Dark Mode

The outlines (actually using box-shadow, rather than outline, so that the outline follows the rounded corners of the inputs and buttons) are:

  • high contrast against their background
  • high contrast against the blue button or input border they surround
  • 3px thick, increasing the input’s overall size slightly

This ensures that I’m not communicating meaning solely with colour and preempts the up-coming Focus Appearance (Minimum) success criterion in WCAG 2.2.

But what about links? The link focus styling was now different to forms and buttons; it changed the background colour of the link to a blue but didn’t add an outline:

A screenshot of a longer heading on my blog listing page that is also a link and in its focus state. It has a blue background with a black outline in Light Mode and a white outline in Dark Mode, but the outline looks messy where the text wraps onto a new line.

This was fine from an accessibility point of view, but consistency is important; especially when highlighting things that can be interacted with: an outline for some elements, a background colour for others…

I had tried it adding a border to focused links, but it looked a bit messy when links broke onto a new line, so I resigned myself to a difference between links’ and other elements’ focus styling:

A screenshot of a longer heading on my blog listing page that is also a link and in its focus state. It has a blue background with a black outline in Light Mode and a white outline in Dark Mode, but the outline looks messy where the text wraps onto a new line.

Just the other day, though, I spotted a tweet from Josh W. Comeau that mentioned box-decoration-break which, after a bit of reading up on MDN Web Docs, looked like it might solve my messy outline problem!

So I added the following to my focus style to see what would happen:

box-decoration-break: clone;

The result was exactly what I was after:

A screenshot of a longer heading on my blog listing page that is also a link and in its focus state. It has a blue background with a black outline in Light Mode and a white outline in Dark Mode, and the outline looks tidy where the text wraps onto a new line.

Where previously I was using a blue background and inverting the text colour, bringing links in line with forms would mean simply adding an outline, so I went one step further and went outline-only:

A screenshot of a longer heading on my blog listing page that is also a link and in its focus state. It's a black outline in Light Mode and a white outline in Dark Mode, and the outline looks tidy where the text wraps onto a new line.

The good news is that box-decoration-break has great support across all modern browsers when used with the -webkit- prefix, and on browsers that don’t support box-decoration-break it still does its job; just looks a bit messier.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. If HTML and ARIA don’t allow it, it’s probably a bad idea

    I like to use invalid HTML and ARIA as a design constraint; a line I can’t step across. Sounds obvious, but in practice it’s not always that simple!

  2. Mac event 2021

    Apple had their final event of the year last night and it was especially exciting as I’m in the market for a new Mac. Here are my thoughts.