Elevated surfaces: use smooth-shadow-ring, never border + shadow

When this applies

Any element that floats above the page surface: cards, dialogs, modals, popovers, dropdowns, menus, tooltips, sheets, toasts, command palettes.

The problem

Putting a border-* (or ring-*) and a shadow-* on the same element draws two stacked edges: the border paints a hard 1px stroke, and the shadow begins just outside it. The result is a visible double border, a crisp line then a soft one. It looks heavy, greyed, and cheap.

The rule