Beyond `border-radius`: What The CSS `corner-shape` Property Unlocks For Everyday UI

Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI — Smashing Magazine

Skip to main content Start reading the article Jump to list of all articles Jump to all topics12 min readCSS, UI, Web DesignShare on Twitter, LinkedInAbout The AuthorBrecht De Ruyte is a self-taught front-end developer located in Belgium with a passion for UX and Design. After more than a decade of working in tech, he … More about Brecht ↬Email NewsletterYour (smashing) email Weekly tips on front-end & UX.Trusted by 182,000+ folks. See User Testing Live SmashingConf Freiburg 2026 Cascading Style Systems: Resilient & Maintainable CSS with Miriam Suzanne Custom Web Forms for Angular, React, & Vue. Your backend. How To Measure UX and Design Impact with Vitaly Friedman How To Measure UX and Design Impact, 8h video + UX training Celebrating 10 million developersFor years, developers have been hacking around the limitations of border-radius, using clip-path, SVG masks, and fragile workarounds just to get anything other than round corners. The new corner-shape property finally changes that, opening the door to beveled, scooped, and squircle corners.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. Just as then, I hope that we can look at this feature as a progressive enhancement slowly making its way to other browsers.I like a good border-radius like any other guy, but the fact is that it only gives us one shape. Round. That’s it. Want beveled corners? 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 corner-shape changes all of that.What Is corner-shape?The corner-shape property is a companion to border-radius. It doesn’t replace it; it modifies the shape of the curve that border-radius creates. Without border-radius, corner-shape does nothing. But together, they’re a powerful pair.The property accepts these values:round: the default, same as regular border-radius,squircle: a superellipse, 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.And you can set different values per corner, just like border-radius:*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..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? Well, first of all, that is something completely different that we’ll get to play around with soon. Second, it does apply to a bit more than borders, such as outlines, box shadows, and backgrounds. That’s the thing that the clip-path property could never do.Why Progressive Enhancement Matters HereAt the time of writing (March 2026), corner-shape is only supported in Chrome 139+ and other Chromium-based browsers. 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 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, just as border-radius was in the age of Internet Explorer 6. The baseline should use the techniques we already know, such as border-radius, clip-path, radial-gradient masks and look intentionally good. Then, for browsers that support corner-shape, we upgrade the experience. Sometimes this can be as simple as just providing a more basic default; sometimes it might need to be a bit more.Every demo in this article is created with that progressive enhancement idea. The structure for the demos looks like:@layer base, presentation, demo; The presentation layer contains the full polished UI using proven techniques. The demo layer wraps everything in @supports:@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. I thought it could be nice just to show some examples. There are a few out there already, but I hope I can add a bit of extra inspiration on top of those.Demo 1: Product Cards With Ribbon BadgesEvery e-commerce site has them: those 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, let’s call it “fiddly code” that has the chance to fall apart the moment someone changes a padding value.But here’s the thing: 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:.product__badge { border-radius: 0 4px 4px 0; background-color: var(--badge-bg); } That’s it. A small, clean label sitting flush against the left edge of the card. Nothing fancy, nothing broken. It works in every browser.(Large preview)For browsers that support corner-shape, we enhance:@layer demo { /* If the browser supports `corner-shape` */ @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. No clip-path, no pseudo-element tricks. Borders, shadows, and backgrounds all follow the declared shape because it is the shape.The cards themselves upgrade from border-radius: 12px to a larger size and the squircle corner-shape, that smooth superellipse curve that makes standard rounding look slightly off by comparison. Designers will notice immediately. Everyone else will just say it “feels more premium.”(Large preview)Hot tip: Using the squircle value on card components is one of those upgrades where the before-and-after difference can be subtle in isolation, but transformative across an entire page. It’s the iOS effect: once everything uses superellipse curves, plain circular arcs start looking out of place. In this demo, I did exaggerate a bit.See the Pen [Corner-shape: Labels [forked]](https://codepen.io/smashingmag/pen/GgjNwQE) by utilitybend.See the Pen Corner-shape: Labels [forked] by utilitybend.Demo 2: Buttons, Tags, And ComponentsThis is the “component library demo”, the one that shows corner-shape isn’t just for hero sections. It’s practical, everyday UI: solid buttons, outlined buttons, status tags, directional arrows, notification badges.The set-up is intentionally clean. Standard border-radius: 10px buttons with a polished typeface. Everything works, everything looks professional. You could do this without hesitation.The corner-shape layer turns it into a showcase. Each button type gets its own shape to demonstrate the range of what’s possible:@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); }

.btn--danger { border-radius: 16px; corner-shape: squircle; }

.btn--notch { border-radius: 12px; corner-shape: notch; }

.btn--scoop { border-radius: 14px; corner-shape: scoop; } } } Before. (Large preview)After. (Large preview)The primary button starts beveled, faceted, and gem-like, and softens to squircle on hover. Because corner-shape values animate via their superellipse() equivalents, the transition is smooth. It’s a fun interaction that used to be hard to achieve but is now a single property (used alongside border-radius, of course).The secondary button uses superellipse(0.5), a value that is between a standard circle and a squircle, combined with a larger border-radius for a distinctive pill-like shape. The danger button gets a more prominent squircle with a generous radius. And notch and scoop each bring their own sharp or concave personality.Beyond buttons, the status tags get corner-shape: notch, those sharp inward cuts that give them a machine-stamped look. The directional arrow tags use round bevel bevel round (and its reverse for the back arrow), replacing what used to require clip-path: polygon(). Now borders and shadows work correctly across all states.See the Pen [Corner-shape: Buttons & Tags [forked]](https://codepen.io/smashingmag/pen/gbwLQdG) by utilitybend.See the Pen Corner-shape: Buttons & Tags [forked] by utilitybend.Demo 3: Testimonial CardsThis demo is probably my favourite one. At its foundation, these are just testimonial cards with serif typography, a sandy palette, and scooped corners on the featured card. The design language is intentionally different from the clean geometric buttons demo, and that’s the point. corner-shape merely adds that extra “edge”.The basis is standard border-radius: 16px cards. The featured testimonial spans full width with a subtle gradient and a decorative open quote mark. Normal cards alternate in a two-column grid. It already looks like som