CSS corner-shape is here. Your buttons will never look the same

uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs7qnajyqounchigk776r.png)

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;
}

Enter fullscreen mode Exit fullscreen mode

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);
}

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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  */
}

Enter fullscreen mode Exit fullscreen mode

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; }
}

Enter fullscreen mode Exit fullscreen mode

Output: A circle that morphs its corners from square to notched and back endlessly.

---

Here are three real-world uses for corner-shape:

1. Pricing cards — Use scoop corners to make a premium card feel distinctive without reaching for SVG or clip-path.
2. Buttons — Use bevel for a retro game-controller aesthetic or notch for a sci-fi UI feel.
3. Tags and badges — Mix squircle with a small border-radius for 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!