Notes

Drawing edges with rings instead of borders keeps the line crisp above drop shadows, preserves depth, and adapts to any background.

Both squares below draw the same 1px edge in the same color, above the same drop shadow. The first uses a border, the second a ring.

A border is painted inside the element, where it meets the drop shadow and softens into it. A ring is a box shadow, 0 0 0 1px, rendered outside the element and composited above the drop shadow, so the edge remains a single crisp line.

The same principle applies to backgrounds. A solid border is a fixed color chosen against one background, and it stops matching on any other. A low-opacity ring darkens whatever is behind it, so the edge holds on gradients, dark surfaces, and images.

Rings render a crisp edge above shadows, adapt to any background, and add no width to the box. Prefer a ring where you would otherwise reach for a border.