CSS corner-shape: Beyond border-radius

For years, border-radius was the only tool we had for shaping corners in CSS. It could round them – and that was about it.

Every bevel, notch, or squircle required SVGs, images, or clip-path workarounds that broke borders and shadows. The new corner-shape property changes that – six corner geometries, animations between them, and borders that actually follow the shape.

What is corner-shape?

The corner-shape property controls how an element’s corners curve. It pairs with border-radius: the radius sets the corner size, corner-shape sets the geometry.

.element {
    border-radius: 30px;
    corner-shape: squircle;
}

Without corner-shape, every rounded corner is an elliptical arc. With it, you get six shapes beyond the standard arc, plus a superellipse() function that lets you dial in anything between them. Each keyword maps to a specific superellipse(K) value:

Positive K values push the curve outward (convex). Negative values pull it inward (concave).

You can use any number. superellipse(0.5) gives you something between a bevel and a round, while superellipse(3) creates an even smoother squircle.

Interactive corner-shape Examples

Things get interesting when you start mixing values and combining different shapes on each corner. The following playgrounds let you experiment in real time.

Superellipse Explorer

Drag the K slider to morph between all corner shapes. The keyword buttons snap to specific values.

Try values between the keywords. That’s where superellipse() really shines.

Per-Corner Playground

Each corner can have its own shape and radius. This playground gives you independent control over all four corners. Adjust the K value and radius for each one, then copy the generated CSS.

Try setting the top corners to bevel (K=0) and the bottom corners to scoop (K=-1) for a distinctive card shape. Or use squircle on all four with a large radius for iOS-style containers.

When you need different shapes per corner, you can use the shorthand or the individual longhand properties:

corner-shape: squircle square bevel round;
/* is equivalent to: */
corner-top-left-shape: squircle;
corner-top-right-shape: square;
corner-bottom-right-shape: bevel;
corner-bottom-left-shape: round;

Real-World Use Cases

Here’s where it gets practical. These patterns were painful or impossible in pure CSS before.

Sale Tags

E-commerce sale tags typically need a pointed end, the classic “price tag” shape. Before corner-shape, this required SVGs or clip-path hacks that broke borders.

With corner-shape: round bevel bevel round and asymmetric border-radius values, you get the shape with real borders intact.

.sale-tag {
    corner-shape: round bevel bevel round;
    border-radius: 6px 42px 42px 6px / 6px 50% 50% 6px;
}

Breadcrumb Navigation

The breadcrumb pattern works the same way. corner-shape: bevel with border-radius: 0 32px 32px 0 / 0 50% 50% 0 creates a clean chevron arrow without pseudo-elements or layered backgrounds.

.breadcrumb {
    corner-shape: bevel;
    border-radius: 0 32px 32px 0 / 0 50% 50% 0;
}

Coupon Card with Scoop Cutouts

The scoop value creates concave curves, the same shape you see on physical coupons where the tear-off perforation curves inward.

By applying corner-shape: round round scoop scoop, the bottom corners scoop inward while the top stays rounded.

.coupon {
    corner-shape: round round scoop scoop;
    border-radius: 12px 12px 40px 40px;
}

Borders, background clipping, and box-shadow all follow the scooped shape. That was never possible with clip-path alone.

Morphing Corner Animation

Since corner-shape values interpolate through their superellipse() equivalents, you can animate between them smoothly. This creates organic morphing effects that would require JavaScript path interpolation otherwise.

@keyframes morph {
    0%   { corner-shape: round; }
    20%  { corner-shape: squircle; }
    40%  { corner-shape: bevel; }
    60%  { corner-shape: scoop; }
    80%  { corner-shape: notch; }
    100% { corner-shape: superellipse(3); }
}

.box {
    border-radius: 50px;
    animation: morph 4s ease-in-out infinite alternate;
}

Notched Data Cards

The notch value creates sharp 90-degree inward cuts. Pair it with a generous border-radius and a colored top bar and you get something that used to require clipping masks.

.data-card {
    corner-shape: notch;
    border-radius: 20px;
}

Scooped Event Ticket

Physical tickets curve inward where the stub tears off. Flip the scoop corners on each half and you get that perforated-edge look in pure CSS.

.ticket-left {
    corner-shape: round scoop scoop round;
    border-radius: 12px 24px 24px 12px;
}

.ticket-right {
    corner-shape: scoop round round scoop;
    border-radius: 24px 12px 12px 24px;
}

Beveled Pricing Table

The bevel shape gives elements a chamfered feel – straight diagonal corners instead of curves. On a pricing table, that edge reads more assertive than the usual soft rounds.

.price-card {
    corner-shape: bevel;
    border-radius: 16px;
}

corner-shape vs. clip-path

These two properties overlap but serve different purposes:

Use corner-shape when you need custom corners with proper border and shadow support. Use clip-path when you need broad browser support and don’t need borders on the clipped shape.

Browser Support

corner-shape is part of the CSS Borders and Box Decorations Module Level 4 specification. It has shipped in stable Chromium browsers but is not yet available in Firefox or Safari.

Progressive Enhancement with @supports

Use @supports to provide corner-shape styles only to browsers that understand them, while keeping a solid border-radius fallback for everyone else.

.card {
    border-radius: 16px;
}

@supports (corner-shape: squircle) {
    .card {
        corner-shape: squircle;
        border-radius: 24px;
    }
}

The transition and animation behavior is also gracefully degraded. Browsers that don’t support the property simply ignore the animation keyframes.

FAQs

Common questions about corner-shape:

Summary

I’ve been waiting for something beyond border-radius for a long time, and corner-shape delivers. Squircles, bevels, scoops, notches – and borders and shadows actually follow them. That alone makes it worth adopting.

Start using it behind @supports today. Browsers that don’t support it get normal rounded corners, and your users on Chrome and Edge get the upgraded experience.