I found something very curious and I don't know what the cause could be. The corners are smoother when the cards are taller and rougher when they are shorter. Width doesn't affect smoothness.

Actually, width does affect the roughness. The corners are at their smoothest when the card is a square.

Urgh, I knew there was a point to that damn fwidth() call. As far as I can tell this version has about the same visual appearance without it changing dependent on resolution.

This has a ShadowedRectangle underneath and a transparent Rectangle with a border on top:

Is there nothing that can be done about that? I have to deal with similar issues when working with SVGs, so I'll understand if you can't. We'll just have to slightly shrink the rectangle underneath instead.

In D29092#654887, @ndavis wrote:

This has a ShadowedRectangle underneath and a transparent Rectangle with a border on top:

Is there nothing that can be done about that? I have to deal with similar issues when working with SVGs, so I'll understand if you can't. We'll just have to slightly shrink the rectangle underneath instead.

Not really. These kinds of artifacts occur because you're blending two semi-transparent pixels together, so the pixel from the rectangle below ends up shining through the pixel above it.

That said, why are you using a second rectangle with a border instead of just adding a border to the shadowedrectangle?