Skip to main content

Pretty borders with box shadows

A small CSS trick

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):

A box shadow in CSS

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:

A card component with a CSS box shadow on a white background.

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:

A card component with a CSS box-shadow and 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.

Details of using CSS box shadow with a border

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:

A card component with a double CSS box shadow, creating both elevation and a border.

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

Details of using CSS box shadow as the elevation and the border

And here's the shadow value:

box-shadow: Opx 10px 14px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05);

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! 🤩

Get in touch

I'm not currenlty looking for freelancer work, but if you want to have a chat, feel free to contact me.