CSS corner-shape: Next-Level Corners for Your UI

#webdev #css #programming #ai

Let’s be honest: for years, web corners were either sharp or slightly rounded, and that was about it. If you wanted anything fancier, you had to hack it together with images or SVGs. Then border-radius came along and made rounded corners a breeze. Now, there’s a new kid on the block: corner-shape. It lets you create all sorts of cool corner effects—bevels, notches, squircles, and more—without any Photoshop tricks or extra markup.

What’s corner-shape?

corner-shape is a new CSS property (currently only in Chrome 139+ and not widely supported yet, so don’t use it in production just yet) that lets you control the shape of a box’s corners, not just how rounded they are. It works together with border-radius—think of border-radius as setting the “size” of the corner, and corner-shape as setting the “style.”

Quick example:

div {
  border-radius: 30px;
  corner-shape: scoop;
}

This gives you a box with “scooped” (concave) corners instead of the usual rounded ones.

Why should you care?

More design options: Go beyond boring rectangles and circles. Make your UI stand out with notched, beveled, or squircle corners.
No more image hacks: Do it all in CSS—no extra images, SVGs, or weird markup.
Consistent styling: Borders, backgrounds, and shadows all follow the new corner shape.

How does it work?

You use corner-shape alongside border-radius. The property accepts one to four values, just like border-radius, and you can mix and match different shapes for each corner.

Supported shapes (keywords):

round (the default, same as border-radius)
bevel (snipped off corners)
notch (sharp, cut-in corners)
scoop (concave, like a bite taken out)
square (removes border-radius, makes it sharp)
squircle (a mix between a square and a circle)
superellipse() (lets you fine-tune the curve with a number)

Examples:

/* All corners beveled */
corner-shape: bevel;

/* Top-left and bottom-right notched, others superellipse */
corner-shape: notch superellipse(0.6);

/* Each corner different */
corner-shape: scoop superellipse(-1.6) superellipse(-2.2) round;

Order matters: The values go clockwise from the top-left corner, just like border-radius.

Real-world uses

Snipped corners: Want that “cyberpunk” or “brutalist” look? Use corner-shape: bevel;.
Sale tags: Mix round and bevel to get those classic sale tag shapes.
Arrow breadcrumbs: Use bevel on one side to make arrow-like list items.
Tooltips: Use scoop for a fun, modern caret.
App icons: squircle is perfect for those rounded-square icons you see on iOS and Android.

Animating corners

You can even animate between different corner shapes! For example, smoothly morph a square into a notched box:

@keyframes corner-pulse {
  0%, 20% { corner-shape: square; }
  100% { corner-shape: notch; }
}

div {
  animation: corner-pulse 4s infinite alternate linear;
}

Heads up: Browser support

This is still experimental. Right now, only Chrome 139+ supports it, and you’ll want to check compatibility before using it in anything important. But it’s a great tool for prototypes, experiments, or just having fun with new CSS features.

TL;DR

corner-shape lets you pick the style of your corners, not just how round they are.
Works with border-radius for tons of new shapes.
Only supported in Chrome 139+ for now.
Great for modern, unique UI designs—no images or SVGs needed.

If you’re tired of the same old corners, give corner-shape a try (in a supported browser). It’s a small change that can make your designs feel fresh and fun.