You have been using border-radius since 2010. It gives you round corners. That is it. One shape. Forever.
CSS just shipped a new property called corner-shape, and it changes the whole game. Same border-radius you already know, but now you control the shape of that corner. Round, flat, scooped inward, notched sharp, six shapes out of the box.
⚠️ Heads up: This is experimental and currently only supported in Chrome Canary (behind a flag). Always check browser compatibility before shipping.
The one rule to remember
corner-shape does nothing without border-radius. Think of it like this: border-radius draws the corner area, and corner-shape decides what lives inside it.
/* This does nothing */
corner-shape: scoop;
/* This works! */
border-radius: 30px;
corner-shape: scoop;
All 6 shapes, explained
Here are all the keyword values you can use:
| Value | What it looks like |
|---|---|
round | The classic smooth curve. Default behavior. |
squircle | Somewhere between a square and a circle. Famously used by iOS icons. |
bevel | A straight diagonal cut across the corner. |
scoop | The corner curves inward. The opposite of round. |
notch | A hard, angular inward cut. Like a chip taken out. |
square | No rounding at all. Cancels border-radius visually. |
Code examples
1. bevel — the flat-cut corner
Great for game UI or industrial design vibes.
.card {
border-radius: 20px;
corner-shape: bevel;
background: #EEEDFE;
border: 2px solid #534AB7;
}
Output: A box with straight diagonal lines cutting across each corner instead of curves.
2. scoop — the concave corner
The opposite of round. The corner curves inward. Borders, shadows, and background all follow it automatically — no extra work.
.badge {
border-radius: 30px;
corner-shape: scoop;
background: cyan;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}
Output: A box where each corner scoops inward, and even the box-shadow wraps around the concave shape.
3. notch — sharp inward cut
A hard, angular notch. The extreme version of scoop.
.button {
border-radius: 16px;
corner-shape: notch;
padding: 12px 24px;
background: #534AB7;
color: white;
}
Output: A button with sharp V-shaped cuts at every corner.
4. Mix and match corners
Just like border-radius, you can set different shapes per corner.
One value → all four corners
Two values → top-left & bottom-right, then top-right & bottom-left
Four values → top-left, top-right, bottom-right, bottom-left (clockwise)
.mixed {
border-radius: 40px;
corner-shape: scoop notch;
/* top-left & bottom-right = scoop */
/* top-right & bottom-left = notch */
}
Output: A box where opposite corners have different shapes, two scooped in, two sharply notched.
Bonus: animate it!
All corner-shape values can be smoothly animated between each other. CSS interpolates the corner math for you, no JavaScript needed.
.button {
border-radius: 24px;
corner-shape: squircle;
padding: 12px 32px;
background: #534AB7;
color: white;
border: none;
}
.button:hover {
animation: morph-corners 0.5s infinite alternate ease-in-out;
}
@keyframes morph-corners {
0% { corner-shape: round; border-radius: 24px; }
33% { corner-shape: bevel; border-radius: 24px; }
66% { corner-shape: scoop; border-radius: 24px; }
100% { corner-shape: notch; border-radius: 24px; }
}
Output: A circle that morphs its corners from square to notched and back endlessly.
Here are three real-world uses for corner-shape:
Pricing cards — Usescoopcorners to make a premium card feel distinctive without reaching for SVG or clip-path.
Buttons — Usebevelfor a retro game-controller aesthetic ornotchfor a sci-fi UI feel.
Tags and badges — Mixsquirclewith a smallborder-radiusfor that iOS-app-icon polish everyone loves.
Conclusion
corner-shape is a small property with a big personality. Once it lands in stable browsers, you will stop reaching for SVGs and clip-paths just to get an interesting corner. One line of CSS does the job.
It is still experimental, so keep an eye on browser support. But now you know exactly how it works when it ships.
I hope you found this helpful! If you enjoyed this, check out my article on CSS Grid for some must-save techniques. 🚀
Drop a 🦄 if you want to see a deep dive into the superellipse()function next!