CSS corner-shape property: 5 Best Ways to Upgrade UI

CSS corner-shape property techniques are what every frontend developer is talking about today. When I first started building websites, rounded corners required five background images: one for each corner, one for the body, and a prayer that the client wouldn’t ask for a different radius. Then the border-radius property landed, and the entire web collectively sighed with relief. That was over fifteen years ago, and honestly, we’ve been riding that same wave ever since.

I like a good border-radius like any other developer, but the fact is that it only gives us one shape: round. Want beveled corners? You have to use clip-path. Scooped ticket edges? SVG mask. Squircle app icons? A carefully tuned SVG that you hope nobody asks you to animate. We’ve been hacking around the limitations of border-radius for years, and those hacks come with real trade-offs. Borders don’t follow clip-paths, shadows get cut off, and you end up with brittle code that breaks the moment someone changes a padding value.

Well, the new CSS corner-shape property changes all of that.

1. What Is the CSS corner-shape Property?

The corner-shape property is a companion to border-radius. It doesn’t replace it; rather, it modifies the exact shape of the curve that border-radius creates. Without border-radius, corner-shape does nothing. But together, they form a powerful styling pair as outlined in the W3C CSS Borders and Box Decorations Module.

The property accepts the following values:

• round: The default, same as regular border-radius.
• squircle: A superellipse, creating the smooth Apple-style rounded square.
• bevel: A straight line between the two radius endpoints (snipped corners).
• scoop: An inverted curve, creating concave corners.
• notch: Sharp inward cuts.
• square: Effectively removes the rounding, overriding border-radius.

You can set different values per corner, exactly like you do with border-radius:

CSS

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

You can also use the superellipse() function with a numeric parameter for fine-grained control:

CSS

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

So the question here might be: why not call this property “border-shape” instead? First of all, that is something completely different that we’ll get to play around with soon. Second, it applies to more than just borders—it affects outlines, box shadows, and backgrounds seamlessly. That is exactly what the clip-path property could never do.

2. Why Progressive Enhancement Matters Here

At the time of writing (March 2026), the CSS corner-shape property is only supported in Chrome 139+ and other Chromium-based browsers, which you can verify on the Can I Use database. That’s a significant chunk of users, but certainly not everyone. The temptation is to either ignore the property until it’s everywhere or to build demos that completely fall apart without it.

I don’t think either approach is right. The way I see it, corner-shape is the perfect candidate for progressive enhancement. Building a resilient frontend that falls back gracefully on older browsers is a core web development principle—much like how securing your backend to prevent WordPress SQL injection attacks ensures your database remains safe regardless of user input. Both practices prioritize a stable, uninterrupted user experience.

The baseline should use the techniques we already know (like border-radius and clip-path) and look intentionally good. Then, for browsers that support corner-shape, we gracefully upgrade the experience.

Every demo in this article is created with that progressive enhancement idea. The structure looks like this:

CSS

@layer base, presentation, demo;

@layer demo {
  @supports (corner-shape: bevel) {
    /* upgrade styles here */
  }
}

No fallback banners, no “your browser doesn’t support this” messages. Just two tiers of design: good and better.

3. Creating Product Cards With Ribbon Badges

Every e-commerce site uses little “New” or “Sale” badges pinned to the corner of a product card. Traditionally, getting that ribbon shape means reaching for clip-path: polygon() or a rotated pseudo-element—fiddly code that falls apart the moment padding changes.

We don’t need the ribbon shape in the baseline. A simple badge with slightly rounded corners tells the same story and looks perfectly fine:

CSS

.product__badge {
  border-radius: 0 4px 4px 0;
  background-color: var(--badge-bg);
}

For browsers that support the CSS corner-shape property, we enhance:

CSS

@layer demo {
  @supports (corner-shape: bevel) {
    .product {
      border-radius: 40px;
      corner-shape: squircle;
    }

    .product__badge {
      padding: 0.35rem 1.4rem 0.35rem 1rem;
      border-radius: 0 16px 16px 0;
      corner-shape: round bevel bevel round;
    }
  }
}

The round bevel bevel round combination creates a directional ribbon. Round where it meets the card edge, beveled to a point on the other side. Borders, shadows, and backgrounds all follow the declared shape perfectly.

4. Upgrading Buttons, Tags, And Components

This demonstrates that corner-shape isn’t just for flashy hero sections; it is highly practical for everyday UI components like buttons, status tags, and notification badges.

The baseline is intentionally clean: standard border-radius: 10px buttons. The corner-shape layer turns it into a showcase:

CSS

@layer demo {
  @supports (corner-shape: bevel) {
    .btn--primary {
      corner-shape: bevel;
      transition: corner-shape 0.3s ease;

      &:hover {
        corner-shape: squircle;
      }
    }

    .btn--secondary {
      border-radius: 25px;
      corner-shape: superellipse(0.5);
    }
  }
}

The primary button starts beveled and softens to a squircle on hover. Because corner-shape values animate via their superellipse() equivalents, the transition is butter-smooth.

5. Designing Unique Pricing Cards

Every SaaS site needs a pricing page where visual hierarchy is key. You want to make one plan stand out without the others feeling neglected.

CSS

@layer demo {
  @supports (corner-shape: squircle) {
    .plan {
      border-radius: 20px;
      corner-shape: squircle;
    }

    .plan--featured {
      border-radius: 24px;
      corner-shape: scoop;
    }

    .plan__badge {
      inset-inline-start: 50%;
      translate: -50% 0;
      padding-inline: 1.2rem;
      border-radius: 10px;
      corner-shape: bevel;
    }
  }
}

The featured plan gets scoop, providing concave corners that immediately set it apart. The “Most Popular” badge takes on corner-shape: bevel, creating a gem-like, faceted shape that feels like a jewel pinned to the card.

Wrapping Up

The approach I keep coming back to is this: don’t design purely for corner-shape, and don’t design around the lack of it, similar to the philosophy found in the Ink & Switch “Local-First Software” paper. Design a solid baseline with border-radius and then creatively enhance it.

We went from hacking together five background images to utilizing border-radius, and now we have the CSS corner-shape property. Each step removed a massive category of messy workarounds. With the ability to mix values per corner and manipulate shadows and borders effortlessly, I’m incredibly excited to see what modern designers build with this property next.