Shadow Borders

Most UI surfaces use border: 1px solid - a flat gray hairline. It works, but it sits on the page like a sticker. Replace it with a 1px white inset highlight on top and a 1px black 4% drop below, and the same surface lifts.

The recipe is a stack of two box-shadows where the border used to be:

/* Before */
border: 1px solid #e5e5e5;

/* After */
box-shadow:
  inset 0 1px 0 0 #fff,
  0 1px 0 0 rgba(0, 0, 0, 0.04);

It reads as dimensional because it mimics light from above. The top edge of a raised surface catches a highlight; the bottom casts a soft shadow. A flat border simulates neither - it's the same shade on every side, so the eye reads it as paint, not lift.

The technique falls apart on pure white backgrounds, where the inset highlight has nothing to contrast against, and on dark surfaces, where the colors invert - a darker inset on top, a soft light glow below. The card surface itself also needs to be a hair off-white so the #fff inset can register.