Inverted Corner — Seamless concave corners

Inverted Corner component creates a concave corner notch that sits flush against any rounded element. Position it absolutely at the card corner, set the radius to match, and pick the fill color. That's it.

Props

• Radius. Match your card's border-radius

• Corner. Which corner the notch cuts into

• Fill. Must match the background color behind the card, not the card itself

• Padding. Adds space around the notch on any or all sides, useful when you need the shape to extend slightly beyond the corner

Setup

1. Set position to Absolute

2. Place at the exact corner of your card

3. Match Radius and Fill

4. Stack it above the card in the layer order

See it in action - remix the example file

Do

• Use on solid color backgrounds

• Use one instance per corner

Don't

• Place it on a gradient or image background

• Set Fill to the card color instead of the background color