border: 10px solid hotpink;

This should be: outline: 10px solid hotpink;.

Borders are calculated as part of the layout, so adding or changing a border also means potentially changing the layout. So just by trying to debug something, you're potentially making the problem worse. It's a heisenbug.

On the other hand, outline doesn't change the layout, it's drawn around the element. Also, you can usually see what the border was on the element which makes it easier to debug all that nested div slop that bootstrap/tailwind vibecoders like to produce. And, you can also offset the outline if you need to also see the borders of elements touching the one you're trying to debug.

AI slop

print("Hello World")

The only line that truly changes your world (For better || !better)

The batman one got me.