I recently posted a Tweet (Xeet?) about how to troubleshoot overflowing elements using a global CSS trick to find that pesky element causing overflow issues on a page (my example used Tailwind, but regular CSS works for this, too).

Many of the comments mentioned that it's better to use "outline" for this scenario instead, citing that using "border" causes layout shifts because borders add thickness to the elements, whereas outlines don't.

I've seen this come up in the past, but I've never visually tested the differences, because using "border" has always worked for what I've needed when looking for the rogue overflowing element. I'm not opposed to using a better method, but wanted to see and understand the differences between "border" and "outline".

Specifications

According to the MDN Docs:

• Outlines never take up space, as they are drawn outside of an element's content. (source: border documentation)

• Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way. (source: outline documentation)

Let's visualize and discuss

The second point confused me, because how can outlines not take up any space if they are a line outside of the element's border?

So, for better visualization, I spun up a Codepen.

On the left side, the borders start inside the parent div (which has a width of 100vw), while the outlines extend a bit past the parent. Scrolling to the end of the overflow, notice how the bordered elements extend to the right by a few px, vs. the outlined elements, which still extend past the parent, but they only extend over the parent because of the width of the outline.

If you toggle off the border elements, there's no more overflow. AHA! So this is what it means when the outline doesn't take up space. Even though in my example, the outlines and borders have a 4px width, the outline doesn't cause the overflow (while the bordered elements DO cause overflow).

You might also notice the difference in spacing between the title and text of the bordered elements vs. the outlined elements. This is because, as stated in the specifications above, the outlines are drawn outside the element, whereas the borders alter an element's dimensions. So, borders can create overflow, as shown above, while outlines cannot.

Final Thoughts

I've been using the border trick for years now, and while I've heard about using outlines instead multiple times, as a creature of (sometimes bad) habit, I've always defaulted to using border to find the overflowing element. And in my use cases, it's always worked, because even with borders themselves being culprits of overflow, it's been easy to find the one with the most overflow and adjust accordingly. But, as shown above, it's more efficient to use outline. And now I have one more bad habit to break.

Happy overflown element hunting!