If you’ve ever used Bootstrap to create a list group of buttons, you might have noticed that Chrome’s blue outline state on focused buttons gets cut off for every button in the list except for the last one.

This happens because of the stacking context and the fact that the outline property does not take up space in the layout. Since all of the buttons are at the same level in the stacking context, the later buttons will be rendered higher up. Since outline does not take up space, it therefore goes “under” the element in front of it, which is why only the last button in the list has an outline that looks correct.

A simple fix for this is to add a z-index to the focused button:

button.list-group-item:focus {
  z-index: 1;
}

Be mindful of stacking contexts elsewhere on the page, as you could end up with buttons showing in front of headers, etc. if you’re not careful.

Here’s a demo, with an exaggerated outline set so it’s visible in all browsers (with Bootstrap it’s only visible in Chrome by default):

See the Pen QjYBEB by Joe Januszkiewicz (@joejanuszk) on CodePen.