You'd think adding a 1px border to a grid of cards would be simple, until you get double borders, broken edges when the card count changes, and layout shifts. Here's how I solved it with box-shadow and a 1px gap, no hacks required.

- The double border problem when adding border to every card
- The classic fix: border-top/left on parent, border-right/bottom on cards (and why it breaks)
- Why flex-grow and max-width workarounds don't fully solve it either
- The box-shadow trick: using spread to fake a border without affecting layout
- Adding a 1px grid gap so shadows overlap cleanly between cards
- Why this works for any number of cards — odd, even, or incomplete rows

---------------------------------------

🌐 Connect With Me 🌐 
- Astro course: https://learnastro.dev
- Website: https://codinginpublic.dev
- Blog: https://chrispennington.blog

🤝 Follow Me 🤝
- Twitter: https://twitter.com/cpenned
- BlueSky: https://bsky.app/profile/codinginpublic.dev

💸 Support Me 💸
- Patreon: https://www.patreon.com/coding_in_public
- Buy Me a Coffee: https://www.buymeacoffee.com/chrispennington

Coding in Public

A practical CSS problem-solving walkthrough covering how to create seamless single-pixel borders around grid cards without double borders or layout gaps. The solution uses box-shadow instead of border on each card, combined with a 1px gap on the parent container, so borders visually overlap without affecting document layout and work regardless of how many cards are present.

This took me way too long to solve 🤦‍♂️