DEV Community

Cover image for CSS corner-shape is here. Your buttons will never look the same
jeetvora331
jeetvora331

Posted on

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

#css #webdev #frontend #beginners

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;
Enter fullscreen mode Exit fullscreen mode

All 6 shapes, explained

example image

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!

Top comments (0)