Shadows over borders

On light surfaces, swap the 1px border for a layered low-alpha shadow.

Jakub Kreheljakub.kr
Instead of borders, I often prefer to use a subtle box-shadow that adds more depth to the element. The change is mostly noticeable in light mode, but it applies to dark mode too. In dark mode the shadow looks like a border would.
Details that make interfaces feel betterRead article ↗
Jakub Kreheljakub.kr
It also helps when using images or multiple colors as backgrounds. Shadows are versatile and adapt well to any background since they use transparency. Solid colors, on the other hand, don't work well when used on backgrounds other than the ones they were designed for.
Same post, “Use shadows instead of borders”Read article ↗

From design-motion-principles, cookbook §3.

One card, many backgrounds

Switch the background and watch the edge.

Solid borderBad
Q3 revenue reviewUpdated 2 min ago
border: 1px solid #e5e5e5
Layered shadowGood
Q3 revenue reviewUpdated 2 min ago
alpha .06 / .06 / .04
.card {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.06),   /* ring */
    0px 1px 2px -1px rgba(0, 0, 0, 0.06),  /* contact */
    0px 2px 4px 0px rgba(0, 0, 0, 0.04);   /* ambient */
}

Hover darkens the shadow

Hover or tap a card, or press Hold hover.

Border recoloursBad
Invoice #1042Due in 5 days
:hover { border-color: #d4d4d4 }
Shadow darkensGood
Invoice #1042Due in 5 days
transition: box-shadow 200ms ease

Dark mode is the exception

Switch to dark, then try the white ring.

1px borderBad
Payroll runFriday, 12 employees
border: 1px solid #e5e5e5
Layered shadowGood
Payroll runFriday, 12 employees
rgba(0,0,0,.06) ×3
@media (prefers-color-scheme: dark) {
  .card { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .card:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
}

Why it matters, pros and cons

Why it matters

A border is one opaque color; a low-alpha shadow darkens any background.

Pros

  • Works on images, gradients and tints
  • Depth without extra visual weight
  • Takes no layout space

Cons

  • Dark mode: use a border or white ring
  • Tables and inputs want a hard drawn edge
  • Animating box-shadow repaints; fine for one card