CSS `corner-shape`: A New Way to Style Corners Beyond Rounded Edges

For years, web designers have relied on border-radius to soften UI elements, but it only offers one shape: round. Need beveled or scooped corners? That meant hacky workarounds like clip-path or SVG masks — fragile solutions that break borders, shadows, and animations. The new corner-shape property changes that by expanding what's possible with corner styling. This Q&A explores what it is, how it works, and why it's a game-changer for everyday UI.

What is the corner-shape property?

corner-shape is a companion to border-radius. It doesn't replace rounded corners but modifies the shape of the curve border-radius creates. Without border-radius, corner-shape does nothing. Together, they unlock multiple corner styles: round (default, same as regular border-radius), squircle (a superellipse, like Apple's smooth square), bevel (straight diagonal cut), scoop (concave inward curve), notch (sharp inward cuts), and square (removes rounding). You can set different values per corner, similar to border-radius shorthand:

corner-shape: bevel round scoop squircle;
/* top-left, top-right, bottom-right, bottom-left */

For extra control, use the superellipse() function with a numeric parameter:

.element {
  border-radius: 25px;
  corner-shape: superellipse(0); /* equal to 'bevel' */
}

It applies to borders, outlines, box shadows, and backgrounds — something clip-path could never do.

Why haven't we been able to style corners like this before?

Before corner-shape, achieving non-rounded corner shapes required complex workarounds. For beveled corners, developers used clip-path — but that clipped borders and shadows, making them invisible or cut off. Scooped ticket edges demanded SVG masks, which were tedious to create and nearly impossible to animate smoothly without breaking. Squircle app icons relied on custom SVG paths that crumbled under padding changes. These hacks came with real trade-offs: brittle code, no border-tracking, and poor accessibility. corner-shape elegantly handles these patterns natively, preserving outlines, shadows, and backgrounds while letting you control each corner independently — no SVG or clip-path nightmares.

What are the exact values of corner-shape and how do they work?

The property accepts six main values:

• round — standard rounded corners, same as border-radius alone.
• squircle — a superellipse, creating Apple-style smooth squares with no hard geometric transition.
• bevel — a straight line cuts across the corner, snipping the tip.
• scoop — an inverted curve, making corners concave like a ticket stub.
• notch — sharp inward cuts, creating a V-shaped indentation.
• square — overrides border-radius, forcing right angles.

You can mix per-corner values using the same shorthand as border-radius. The superellipse() function provides further granularity: a parameter of 0 equals bevel, 1 equals round, and values in between create smoother transitions. This allows fine-tuning squircle shapes without complex math.

Why is progressive enhancement crucial for corner-shape?

As of March 2026, corner-shape is only supported in Chrome 139+ and other Chromium-based browsers. That's a significant audience, but not everyone. Ignoring the property until universal support or building demos that break without it are both wrong approaches. Instead, treat corner-shape as a progressive enhancement, just like border-radius was in the Internet Explorer 6 era. Your baseline design should rely on border-radius alone (which has near-universal support). Then add corner-shape as a layer that enhances the experience for modern browsers. This ensures functionality and aesthetics for all users, while future-proofing your code.

What are practical everyday use cases for corner-shape?

corner-shape shines in UI elements that go beyond simple rounded buttons:

• Beveled cards or panels for a sharp, modern dashboard look — without SVG clipping.
• Squircle app icons that mimic iOS home screen icons, with proper shadow and outline support.
• Scooped ticket stubs for event or booking interfaces, creating concave edges that suggest tear-off ends.
• Notched corners for badges or tags that need a bite-out shape (like price tags).
• Animated corner changes — since corner-shape works with CSS transitions, you can morph from round to bevel on hover, enhancing interactivity.

All these previously required fragile hacks. Now they're simple CSS, resilient to layout changes and responsive design.

How does corner-shape compare to clip-path for corner styling?

clip-path can create custom shapes, including beveled or scooped corners, but it comes with major limitations: it literally clips the element's box, meaning borders are cut off, box shadows are truncated, and padding changes can break the path alignment. corner-shape, on the other hand, operates within the element's border box. It adjusts the corner's visual shape while preserving the full border, shadow, and background rendering. For example, a beveled corner using corner-shape will still show a solid border line that follows the cut, whereas clip-path would delete that portion. Additionally, corner-shape integrates seamlessly with border-radius, allowing round or squircle shapes that clip-path can't easily replicate. In short, corner-shape is the dedicated, lightweight solution for corner styling; clip-path is best for full custom shapes where border/shadow integrity isn't required.

When can I start using corner-shape in production?

Currently (March 2026), corner-shape is supported only in Chrome 139+ and Chromium-based browsers (Edge, Opera, Samsung Internet). Firefox and Safari have not yet implemented it. Given Chrome's large market share (over 65% globally), you can safely use it as a progressive enhancement for those users — but do not rely on it for critical functionality. The recommended approach: build your default styles with border-radius only, then add corner-shape in a separate rule or using @supports to target Chrome. As the property gains traction (it's part of the CSS Backgrounds and Borders Module Level 4), support will likely broaden. For now, treat it as a bonus visual polish that degrades gracefully to standard rounded corners.