What is the CSS corner-shape property?

The corner-shape property is a companion to border-radius, not a replacement. It changes the shape of the curve that border-radius draws. The two work as a pair, and corner-shape also affects outlines, box shadows, and backgrounds.

Which corner shapes can you use with corner-shape?

The property accepts round, squircle, bevel, scoop, notch, and square. You can also mix values per corner, such as round bevel bevel round, and use the superellipse() function for finer control between round and squircle.

How do you use corner-shape without breaking older browsers?

Use progressive enhancement. Build a solid baseline with border-radius, then upgrade supporting browsers inside an @supports (corner-shape: bevel) feature query. Every visitor gets a complete design, and Chromium users get a richer version.

Does corner-shape work in all browsers?

Not yet. It is supported in Chrome 139+ and other Chromium-based browsers, which power most web sessions. Firefox and Safari do not support it at the time of writing, so treat it as a progressive enhancement.

CSS Border Radius: Beyond Round Corners

Q: Should you start using corner-shape now?

Yes, provided you enhance rather than depend on it. Design one strong baseline with border-radius first, then let supporting browsers enjoy the extra polish such as squircle cards, bevelled badges, and scooped featured elements.

Byter, Digital Marketing Agency, Work With Us, Tailored Marketing Packages

Erik Francas

June 10, 2026

CSS Border Radius: Shaping Corners Beyond

CSS border radius powers over three-quarters of every web session worldwide. That number answers the question developers ask first. Discover how to shape corners well beyond the basics.

Yes – you can use the new corner-shape property in production today. In fact, most of your visitors will see the upgrade straight away.

This guide explains what the property does, which shapes it unlocks, and how to ship it safely. Throughout, the focus stays on real interface problems rather than theory.

Why Did Border-radius Leave Developers Stuck?

CSS Border Radius For over fifteen years, border-radius gave the web exactly one shape. That shape was round, and only round.

Naturally, designers wanted more. They asked for bevelled badges, scooped ticket edges, and smooth squircle icons.

So developers reached for workarounds instead. They leaned on clip-path, SVG masks, and rotated pseudo-elements.

Unfortunately, those hacks carried a real cost. Borders ignored the clip, shadows got cut off, and shapes broke under a single padding change.

In other words, the pain was never about taste. It was about fragile code that collapsed under pressure.

What Is The CSS Border Radius corner-shape Property?

The corner-shape property is a companion to border-radius, not a replacement. It changes the shape of the curve that the border-radius draws.

As a result, the two properties work as a pair. Without a border-radius value, corner-shape simply does nothing.

Crucially, it reaches further than clip-path ever could. It also shapes outlines, box shadows, and backgrounds.

Which Corner Shapes Can You Actually Use?

The property accepts several values, and each one solves a different design problem:

round – the familiar default, identical to plain border-radius.
squircle – the smooth, Apple-style superellipse.
bevel – a straight, snipped corner.
scoop – a concave, inward curve.
notch – a sharp inward cut.
square – removes the rounding entirely.

With CSS border radius, you can moreover mix and match different shape values across each individual corner that you style. For instance, round bevel bevel round builds a tidy directional ribbon.

For finer tuning, reach for the superellipse() function. It dials the curve smoothly between round and squircle.

How Do You Add Corner-shape Without Breaking Older Browsers?

Here sits the real question for production work. Firefox and Safari do not support the property yet.

Fortunately, progressive enhancement solves this neatly. First, build a solid baseline with border-radius.

Then, upgrade supporting browsers on top. A feature query keeps the two tiers cleanly separated:

@supports (corner-shape: bevel) {

  .card {

    border-radius: 40px;

    corner-shape: squircle;

  }

}

Consequently, every visitor receives a complete, polished design. Chromium users simply enjoy a slightly richer version.

Best of all, nobody sees broken layouts. Likewise, nobody reads an “unsupported browser” banner.

Where Does CSS Border Radius Shape Everyday Interfaces?

CSS Border Radius The property shines on the components teams build daily. Product cards, for example, can drop fiddly ribbon hacks completely.

Instead, a simple round bevel bevel round shape creates the badge. Borders and shadows then follow it correctly.

Buttons gain personality, too. A primary button can morph from bevel to squircle on hover.

Because the values interpolate smoothly, that transition feels effortless. Previously, the same effect demanded awkward JavaScript or SVG.

Pricing pages benefit in a different way. Give the featured plan a scoop, and it stands apart instantly.

The “Most Popular” badge can then take a bevel. As a result, shape itself communicates hierarchy.

Testimonials and media players round things off. Squircle avatars and scooped cards add warmth without any extra markup.

Should You Start Using corner-shape Now?

Build on CSS border radius and enhance your corners rather than depend on it for everything your interface needs today. Treat the property as a bonus, exactly as we once treated border-radius.

Above all, design one strong baseline first. Then let supporting browsers enjoy the extra polish.

Ultimately, each step has removed a whole category of hacks. First came border-radius, and now corner-shape continues the trend.