# Using shadows instead of borders

> Using shadows instead of borders in light mode.
>
> Source: https://jakub.kr/work/shadows. Interactive demos are only available on the page.

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.

```css title="border-shadow"
.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`.

```css title="border-shadow-hover"
.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.

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