Shadows over borders

Why an edge drawn as a shadow stays crisp over shadows and holds on any background.

Both squares below draw the same 1px edge, the first with a border, the second with a shadow, Tailwind’s ring.

A border paints inside the element, where it softens into the drop shadow. A 0 0 0 1px shadow composites above it, so the line stays crisp.

Backgrounds work the same way. A border color is picked for one background, while a low-opacity shadow darkens whatever is behind it, so the edge holds on gradients, dark surfaces, and images.

Shadows add no width to the box either. Prefer one wherever you would reach for a border.