Using Shadows Instead of Borders

Instead of using a border in light mode, I often prefer a subtle box-shadow that adds more depth to the element.

The specific shadow in this example is actually composed of three different shadows.

.border-shadow {
box-shadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.06),
0px 1px 2px -1px rgba(0, 0, 0, 0.06),
0px 2px 4px 0px rgba(0, 0, 0, 0.04);
}

For the hover state, it is the same box-shadow just slightly darker. To transition between the shadows, we can add box-shadow to the transition property, like this: transition-shadow.

.border-shadow {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08),
    0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

Using shadows instead of borders also has a benefit when using images or multiple colors as backgrounds. Shadows are versatile and they adapt really well to any kind of background, since they use transparency.

Border

Shadow

Solid colors, on the other hand, don’t work as well when used on a background other than the one they were designed for.

More

If you enjoy articles like this and want to learn more, take a look at Interfaces, my design engineering magazine.

It’s where I share everything I know, from animation and typography to layout, color and everything else that is a part of building a great interface.