Pretty borders with box shadows

As a designer, I play with shadows every day. I use shadows primarily to imply elevation, the distance between components along the Z-axis. Here's a card component using one of the two shadow properties, box-shadow (the other is drop-shadow):

Well, that looks OK! I used a semi-transparent black colour to create the shadow. While using a colour based on the background (blue) would result in a better-looking shadow, we're about to discuss another issue: What if we change the background colour to be the same as the card background colour? Let's take a look:

You might notice that the top of the card component blends even too well with the background. As a designer, I'm tempted to fix the issue by adding a slight border:

While that approach solves the blending issue, it poses a new one: The border is darker than the shadow on the sides but lighter on the bottom. This makes the bottom part look blurry.

The challenge is that the shadow with a Y-axis offset will be darker on the bottom. A solution could be to use a linear gradient on the border. While that's technically possible, I propose a more straightforward solution: Using the box-shadow property also for the border. This is how it looks:

Much better! The border adapts to the shadow colour as the two transparent shadows overlap. Here's how it looks in detail:

And here's the shadow value:

box-shadow:
  0px 10px 14px 0px rgb(0 0 0 / 10%),
  0px 0px 0px 1px rgb(0 0 0 / 8%);

While I assume this technique has been around for a while, I was late to the game and discovered it only lately on the Next.js website. If you feel like you want to learn more about shadows, I recommend Josh W. Comeau's wonderful article on the topic.

Enjoy your new shadow and border superpowers! 🤩