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

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:

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:

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!