The clever semi-transparent border + 'background-clip: padding box' trick. The intention is to give borders more contrast when used in combination with a box-shadow and prevent 'murky borders' where it's hard to distinguish between the border and shadow. Inspired by James McDonald.

Check out this example, the border on the left element appears much more well defined than the one on the right, This is most noticeable on the bottom edge where the box-shadow is most prominent:

Only drawback? Imagine we have an overlay menu that has a solid color pass behind it. It can create a not-ideal visual effect of the underneath element passing behind the border:

The styling implementation involves a combination of using a transparent border color and 'padding-box' as the value for the background-clip css property. To explain it simply, this will allow the shadow to pass behind the semi-transparent border and make it appear darker where the shadow darkness is most prominent. The darker the shadow, the darker the border appears.

const Paper = () => {
    return (
      <div className="w-60 p-4 rounded bg-white border border-slate-900[20] bg-clip-padding"/>
    );
};