I need to preface this post by saying: bare with me. I was without doing much coding for over a year, so maybe I'm wrong, or everyone already knows this.

I recently had a situation where I needed to add a border between elements that sat in a 12 grid with a gap between them. To my knowledge (and again, possibly I am wrong), you can't add much on top of the grid-gap. I searched around but was in a rush, so I decided to do something that achieved the result visually. But it doesn't feel super nice and clean. In moments like this, I remind myself of what Rachel Andrew said at Pixel Pioneers some years ago: “Is this the right way to do it?... well, does it work?”.

It works. So here it is. You can fake a border effect by using two shadows, one on top of the other. The first declared shadow should match your background colour, while the second should be the desired border colour. The shadow with the same background colour will be on top of the shadow with the desired border colour. When this happens, there is a tiny difference in their offset. The shadow with the border colour will only be visible in that little offset gap.

The offset value should be half of the size of the gap, and the shadow that will act as the border should be a tiny bit bigger offset value.

See the Pen Experimenting with using box-shadow as a border on top of a grid gap by Ana Rodrigues (@ohhelloana) on CodePen.

In the codepen above I was somewhat successful at reproducing this visual effect with a few specific sizes. While the gap property accepts quite a few of them, the box-shadow property is more limited (I couldn't get this to work with percentages or calc() for example).

While the pixel option is the one that seems to work as expected in most browsers (desktop and mobile), it is also quite interesting how different lengths will generate visually different thicknesses of this fake border.

Update: Christopher Kirk-Nielsen very kindly forked my codepen and experimented with using custom properties and outlines.