---
title: "Inverted Corner — Free Framer component · Best of Framer"
description: "Free Framer component · by justyna · Backgrounds. Inverted Corner component creates a concave corner notch that sits flush against any rounded element."
canonical: "https://framer.elliotli.dev/component/inverted-corner"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Inverted Corner

# Inverted Corner

Seamless concave corners

[View on Framer](https://framer.com/marketplace/components/inverted-corner/?via=elliot-li)

![Inverted Corner preview image 1](https://framer.elliotli.dev/og/component/inverted-corner/7a83254a6a2854ba/1600x1200.jpg)

## Summary

Inverted Corner component creates a concave corner notch that sits flush against any rounded element.

## Description

**_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](https://framer.link/sKf4Bga)

### **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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1368

## Details

- **Author**: justyna
- **Published**: 2026-06-05
- **Updated**: 2026-06-05
- **Added**: 2026-06-05
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background