{"id":1164,"date":"2026-03-12T09:00:00","date_gmt":"2026-03-12T10:00:00","guid":{"rendered":"https:\/\/computercoursesonline.com\/?p=1164"},"modified":"2026-03-18T10:00:31","modified_gmt":"2026-03-18T10:00:31","slug":"beyond-border-radius-what-the-css-corner-shape-property-unlocks-for-everyday-ui","status":"publish","type":"post","link":"https:\/\/computercoursesonline.com\/index.php\/2026\/03\/12\/beyond-border-radius-what-the-css-corner-shape-property-unlocks-for-everyday-ui\/","title":{"rendered":"Beyond `border-radius`: What The CSS `corner-shape` Property Unlocks For Everyday UI"},"content":{"rendered":"<p>              <title>Beyond `border-radius`: What The CSS `corner-shape` Property Unlocks For Everyday UI<\/title><\/p>\n<article>\n<header>\n<h1>Beyond `border-radius`: What The CSS `corner-shape` Property Unlocks For Everyday UI<\/h1>\n<address>Brecht De Ruyte<\/address>\n<p>                  2026-03-12T10:00:00+00:00<br \/>\n                  2026-03-18T09:33:12+00:00<br \/>\n                <\/header>\n<p>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\u2019t ask for a different radius. Then the <code>border-radius<\/code> property landed, and the entire web collectively sighed with relief. That was over fifteen years ago, and honestly, we\u2019ve 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.<\/p>\n<p>I like a good <code>border-radius<\/code> like any other guy, but the fact is that it only gives us one shape. Round. That\u2019s 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\u2019ve been hacking around the limitations of <code>border-radius<\/code> for years, and those hacks come with real trade-offs: borders don\u2019t follow clip-paths, shadows get cut off, and you end up with brittle code that breaks the moment someone changes a padding value.<\/p>\n<p>Well, the new <strong><code>corner-shape<\/code><\/strong> changes all of that.<\/p>\n<h2 id=\"what-is-corner-shape\">What Is <code>corner-shape<\/code>?<\/h2>\n<p>The <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/corner-shape\/\"><code>corner-shape<\/code><\/a> property is a companion to <code>border-radius<\/code>. It doesn\u2019t replace it; it modifies the <em>shape<\/em> of the curve that <code>border-radius<\/code> creates. Without <code>border-radius<\/code>, <code>corner-shape<\/code> does nothing. But together, they\u2019re a powerful pair.<\/p>\n<p>The property accepts these values:<\/p>\n<ul>\n<li><strong><code>round<\/code><\/strong>: the default, same as regular <code>border-radius<\/code>,<\/li>\n<li><strong><code>squircle<\/code><\/strong>: a superellipse, the smooth Apple-style rounded square,<\/li>\n<li><strong><code>bevel<\/code><\/strong>: a straight line between the two radius endpoints (snipped corners),<\/li>\n<li><strong><code>scoop<\/code><\/strong>: an inverted curve, creating concave corners,<\/li>\n<li><strong><code>notch<\/code><\/strong>: sharp inward cuts,<\/li>\n<li><strong><code>square<\/code><\/strong>: effectively removes the rounding, overriding <code>border-radius<\/code>.<\/li>\n<\/ul>\n<p>And you can set different values per corner, just like <code>border-radius<\/code>:<\/p>\n<pre><code class=\"language-css\">&#042;corner-shape: bevel round scoop squircle;\n\/&#042; top-left, top-right, bottom-right, bottom-left &#042;\/\n<\/code><\/pre>\n<p>You can also use the <a href=\"https:\/\/css-tricks.com\/almanac\/functions\/s\/superellipse\/\"><code>superellipse()<\/code><\/a> function with a numeric parameter for fine-grained control.<\/p>\n<pre><code class=\"language-css\">.element { \n  border-radius: 25px;\n  corner-shape: superellipse(0); \/&#042; equal to 'bevel' &#042;\/\n}\n<\/code><\/pre>\n<p>So the question here might be: why not call this property \u201c<code>border-shape<\/code>\u201d instead? Well, first of all, that is <a href=\"https:\/\/una.im\/border-shape\">something completely different that we\u2019ll get to play around with soon<\/a>. Second, it does apply to a bit more than borders, such as outlines, box shadows, and backgrounds. That\u2019s the thing that the <code>clip-path<\/code> property could never do.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"why-progressive-enhancement-matters-here\">Why Progressive Enhancement Matters Here<\/h2>\n<p>At the time of writing (March 2026), <code>corner-shape<\/code> is only supported in Chrome 139+ and other Chromium-based browsers. That\u2019s a significant chunk of users, but certainly not everyone. The temptation is to either ignore the property until it\u2019s everywhere or to build demos that fall apart without it.<\/p>\n<p>I don\u2019t think either approach is right. The way I see it, <code>corner-shape<\/code> is the perfect candidate for progressive enhancement, just as <code>border-radius<\/code> was in the age of Internet Explorer 6. The baseline should use the techniques we already know, such as <code>border-radius<\/code>, <code>clip-path<\/code>, <code>radial-gradient<\/code> masks and look intentionally good. Then, for browsers that support <code>corner-shape<\/code>, 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.<\/p>\n<p><strong>Every demo in this article is created with that progressive enhancement idea.<\/strong> The structure for the demos looks like:<\/p>\n<pre><code class=\"language-css\">@layer base, presentation, demo;\n<\/code><\/pre>\n<p>The <code>presentation<\/code> layer contains the full polished UI using proven techniques. The <code>demo<\/code> layer wraps everything in <code>@supports<\/code>:<\/p>\n<pre><code class=\"language-css\">@layer demo {\n  @supports (corner-shape: bevel) {\n    \/&#042; upgrade styles here &#042;\/\n  }\n}\n<\/code><\/pre>\n<p>No fallback banners, no \u201cyour browser doesn\u2019t support this\u201d 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.<\/p>\n<h2 id=\"demo-1-product-cards-with-ribbon-badges\">Demo 1: Product Cards With Ribbon Badges<\/h2>\n<p>Every e-commerce site has them: those little \u201cNew\u201d or \u201cSale\u201d badges pinned to the corner of a product card. Traditionally, getting that ribbon shape means reaching for <code>clip-path: polygon()<\/code> or a rotated pseudo-element, let&rsquo;s call it \u201cfiddly code\u201d that has the chance to fall apart the moment someone changes a padding value.<\/p>\n<p>But here\u2019s the thing: we don\u2019t <em>need<\/em> the ribbon shape in the baseline. A simple badge with slightly rounded corners tells the same story and looks perfectly fine:<\/p>\n<pre><code class=\"language-css\">.product__badge {\n  border-radius: 0 4px 4px 0;\n  background-color: var(--badge-bg);\n}\n<\/code><\/pre>\n<p>That\u2019s it. A small, clean label sitting flush against the left edge of the card. Nothing fancy, nothing broken. It works in every browser.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/1-product-cards-corner-badges.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Product cards with colored corner badges like \u201cNew,\u201d \u201c\u201330%,\u201d and \u201cLimited.\u201d\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/1-product-cards-corner-badges.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/1-product-cards-corner-badges.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>For browsers that support <code>corner-shape<\/code>, we enhance:<\/p>\n<pre><code class=\"language-css\">@layer demo {\n  \/&#042; If the browser supports `corner-shape` &#042;\/\n  @supports (corner-shape: bevel) {\n    .product {\n      border-radius: 40px;\n      corner-shape: squircle;\n    }\n\n    .product&#095;&#095;badge {\n      padding: 0.35rem 1.4rem 0.35rem 1rem;\n      border-radius: 0 16px 16px 0;\n      corner-shape: round bevel bevel round;\n    }\n  }\n}\n<\/code><\/pre>\n<p>The <code>round bevel bevel round<\/code> combination creates a directional ribbon. Round where it meets the card edge, beveled to a point on the other side. No <code>clip-path<\/code>, no pseudo-element tricks. Borders, shadows, and backgrounds all follow the declared shape because it <em>is<\/em> the shape.<\/p>\n<p>The cards themselves upgrade from <code>border-radius: 12px<\/code> to a larger size and the <code>squircle<\/code> 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 \u201cfeels more premium.\u201d<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/2-product-cards-ribbon-badges.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Product cards with arrow-shaped corner badges labeled \u201cNew,\u201d \u201c\u201330%,\u201d and \u201cLimited,\u201d pointing inward.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/2-product-cards-ribbon-badges.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/2-product-cards-ribbon-badges.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><strong>Hot tip:<\/strong> Using the <code>squircle<\/code> 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\u2019s the iOS effect: once everything uses superellipse curves, plain circular arcs start looking out of place. In this demo, I did exaggerate a bit.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"GgjNwQE\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Corner-shape: Labels [forked]](https:\/\/codepen.io\/smashingmag\/pen\/GgjNwQE) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/GgjNwQE\">Corner-shape: Labels [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"demo-2-buttons-tags-and-components\">Demo 2: Buttons, Tags, And Components<\/h2>\n<p>This is the \u201ccomponent library demo\u201d, the one that shows <code>corner-shape<\/code> isn\u2019t just for hero sections. It\u2019s practical, everyday UI: solid buttons, outlined buttons, status tags, directional arrows, notification badges.<\/p>\n<p>The set-up is intentionally clean. Standard <code>border-radius: 10px<\/code> buttons with a polished typeface. Everything works, everything looks professional. You could do this without hesitation.<\/p>\n<p>The <code>corner-shape<\/code> layer turns it into a showcase. Each button type gets its own shape to demonstrate the range of what\u2019s possible:<\/p>\n<pre><code class=\"language-css\">@layer demo {\n  @supports (corner-shape: bevel) {\n    .btn--primary {\n      corner-shape: bevel;\n      transition: corner-shape 0.3s ease;\n\n      &amp;:hover {\n        corner-shape: squircle;\n      }\n    }\n\n    .btn--secondary {\n      border-radius: 25px;\n      corner-shape: superellipse(0.5);\n    }\n\n    .btn--danger {\n      border-radius: 16px;\n      corner-shape: squircle;\n    }\n\n    .btn--notch {\n      border-radius: 12px;\n      corner-shape: notch;\n    }\n\n    .btn--scoop {\n      border-radius: 14px;\n      corner-shape: scoop;\n    }\n  }\n}\n<\/code><\/pre>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/3-buttons-before.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Buttins and tags before\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/3-buttons-before.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Before. (<a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/3-buttons-before.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/4-buttons-after.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Buttins and tags after\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/4-buttons-after.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      After. (<a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/4-buttons-after.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The primary button starts beveled, faceted, and gem-like, and softens to <code>squircle<\/code> on hover. Because <code>corner-shape<\/code> values animate via their <code>superellipse()<\/code> equivalents, the transition is smooth. It\u2019s a fun interaction that used to be hard to achieve but is now a single property (used alongside <code>border-radius<\/code>, of course).<\/p>\n<p>The secondary button uses <code>superellipse(0.5)<\/code>, a value that is <em>between<\/em> a standard circle and a squircle, combined with a larger <code>border-radius<\/code> for a distinctive pill-like shape. The danger button gets a more prominent <code>squircle<\/code> with a generous radius. And <code>notch<\/code> and <code>scoop<\/code> each bring their own sharp or concave personality.<\/p>\n<p>Beyond buttons, the status tags get <code>corner-shape: notch<\/code>, those sharp inward cuts that give them a machine-stamped look. The directional arrow tags use <code>round bevel bevel round<\/code> (and its reverse for the back arrow), replacing what used to require <code>clip-path: polygon()<\/code>. Now borders and shadows work correctly across all states.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"gbwLQdG\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Corner-shape: Buttons &amp; Tags [forked]](https:\/\/codepen.io\/smashingmag\/pen\/gbwLQdG) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/gbwLQdG\">Corner-shape: Buttons &amp; Tags [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<h2 id=\"demo-3-testimonial-cards\">Demo 3: Testimonial Cards<\/h2>\n<p>This 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\u2019s the point. <code>corner-shape<\/code> merely adds that extra \u201cedge\u201d.<\/p>\n<p>The basis is standard <code>border-radius: 16px<\/code> 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 something from a premium marketing site.<\/p>\n<p>The <code>corner-shape<\/code> layer adds character:<\/p>\n<pre><code class=\"language-css\">@layer demo {\n  \/&#042; Progressive enhancement &#042;\/\n  @supports (corner-shape: scoop) {\n    .testimonial {\n      border-radius: 20px;\n      corner-shape: squircle;\n    }\n\n    .testimonial--featured {\n      border-radius: 24px;\n      corner-shape: scoop;\n    }\n\n    .testimonial:not(.testimonial--featured):nth-child(even) {\n      corner-shape: scoop round;\n    }\n\n    .testimonial&#095;&#095;avatar {\n      border-radius: 28%;\n      corner-shape: squircle;\n    }\n  }\n}\n<\/code><\/pre>\n<p>The featured card gets full <code>scoop<\/code> corners, concave on all four sides, creating an organic, almost hand-crafted feel that matches the serif typography. Even-numbered cards mix <code>scoop round<\/code>, giving each one a slightly different personality without any extra markup.<\/p>\n<p>The author avatars switch from circles to <code>squircle<\/code>. A small touch that makes it a bit more \u201cdifferent\u201d.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/5-testimonials-before.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Testimonials before\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/5-testimonials-before.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Fallback. (<a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/5-testimonials-before.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/6-testimonials-after.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Testimonials after\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/6-testimonials-after.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Supported. (<a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/6-testimonials-after.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><strong>Hot tip:<\/strong> <code>corner-shape: scoop<\/code> pairs beautifully with serif fonts and warm color palettes. The concave curves echo the organic shapes found in editorial design, calligraphy, and print layouts. For geometric sans-serif designs, stick with <code>squircle<\/code> or <code>bevel<\/code>.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"RNGoqvZ\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Corner-shape: Testimonials [forked]](https:\/\/codepen.io\/smashingmag\/pen\/RNGoqvZ) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/RNGoqvZ\">Corner-shape: Testimonials [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"demo-4-pricing-cards\">Demo 4: Pricing Cards<\/h2>\n<p>Every SaaS site needs a pricing page, and the visual hierarchy challenge is always the same: make one plan stand out without the others feeling neglected. This demo solves it with <code>corner-shape<\/code>.<\/p>\n<p>This is quite similar to the last demo in that we once again have a nice baseline for browsers that don\u2019t yet support <code>corner-shape<\/code>. We have three cards in a row, where the featured plan is distinguished by a warm gradient background, a stronger border, and a \u201cMost Popular\u201d badge.<\/p>\n<p>The enhancement takes it further:<\/p>\n<pre><code class=\"language-css\">@layer demo {\n  @supports (corner-shape: squircle) {\n    .plan {\n      border-radius: 20px;\n      corner-shape: squircle;\n    }\n\n    .plan--featured {\n      border-radius: 24px;\n      corner-shape: scoop;\n    }\n\n    .plan&#095;&#095;badge {\n      inset-inline-start: 50%;\n      translate: -50% 0;\n      padding-inline: 1.2rem;\n      border-radius: 10px;\n      corner-shape: bevel;\n    }\n\n    .plan&#095;&#095;cta {\n      border-radius: 12px;\n      corner-shape: squircle;\n    }\n  }\n}\n<\/code><\/pre>\n<p>Regular plans get <code>squircle<\/code> for that premium feel. The featured plan gets <code>scoop<\/code>, concave corners that immediately set it apart from its neighbors. The \u201cMost Popular\u201d badge centers itself and takes on <code>corner-shape: bevel<\/code>, creating a gem-like, faceted shape that feels like a jewel pinned to the card. The CTA buttons get <code>squircle<\/code> to match the card language.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/7-pricing-before.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Pricing cards: before\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/7-pricing-before.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Before. (<a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/7-pricing-before.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/8-pricing-after.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Pricing cards: after\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/8-pricing-after.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      After. (<a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/8-pricing-after.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>What I like about this demo is how the shape hierarchy mirrors the content hierarchy. The most important element (featured plan) gets the most distinctive shape (<code>scoop<\/code>). The badge gets the sharpest shape (<code>bevel<\/code>). Everything else gets a simpler upgrade (<code>squircle<\/code>). Shape becomes a tool for visual emphasis, not just decoration.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"vEXyQMZ\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Corner-shape: Pricing [forked]](https:\/\/codepen.io\/smashingmag\/pen\/vEXyQMZ) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/vEXyQMZ\">Corner-shape: Pricing [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<h2 id=\"demo-5-music-player\">Demo 5: Music Player<\/h2>\n<p>The final demo is a warm dark UI for a music player with album art, playback controls, genre tags, and a listening queue. It\u2019s the most visually complex demo, and it shows how <code>corner-shape<\/code> works across many different element types within a single cohesive design.<\/p>\n<p>This time, I went for a dark warm palette built on <code>oklch(18% 0.015 40)<\/code>, and standard rounded corners throughout. The album art gets <code>border-radius: 12px<\/code>, queue items get <code>border-radius: 12px<\/code>, genre tags get <code>border-radius: 5px<\/code>. It looks good. It\u2019s a complete, polished player.<\/p>\n<p>And then once again, we add some enhancements:<\/p>\n<pre><code class=\"language-css\">@layer demo {\n  @supports (corner-shape: squircle) {\n    .now-playing {\n      border-radius: 20px;\n      corner-shape: squircle;\n    }\n\n    .now-playing&#095;&#095;art {\n      border-radius: 16px;\n      corner-shape: squircle;\n    }\n\n    .now-playing&#095;&#095;swatch {\n      border-radius: 26%;\n      corner-shape: squircle;\n    }\n\n    .queue-item {\n      border-radius: 14px;\n      corner-shape: scoop round;\n    }\n\n    .tag {\n      border-radius: 8px;\n      corner-shape: bevel;\n    }\n  }\n}\n<\/code><\/pre>\n<p>The player card and album art get <code>squircle<\/code>, the same curves used for app icons and album thumbnails. Album art swatches go from <code>border-radius: 22%<\/code> to a proper <code>squircle<\/code> at <code>26%<\/code>, which is a subtle but meaningful difference in the visual elements you stare at while listening.<\/p>\n<p>Queue items get <code>scoop round<\/code>, resulting in concave corners on the top-left and bottom-left, and round on the right. It gives each row a distinctive feel without overwhelming the layout. Genre tags get <code>bevel<\/code> for that sharp feeling.<\/p>\n<p>The Play button also gets <code>corner-shape: squircle<\/code> on its existing <code>border-radius: 50%<\/code> to fit the album covers. On the surface, the difference is barely noticeable, but it contributes to the overall feel of the player.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"ogzYQRB\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Corner-shape: Music player [forked]](https:\/\/codepen.io\/smashingmag\/pen\/ogzYQRB) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/ogzYQRB\">Corner-shape: Music player [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/9-music-before.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Music player: before\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/9-music-before.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Before. (<a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/9-music-before.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/10-music-after.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Music player: after\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/10-music-after.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      After. (<a href=\"https:\/\/files.smashing.media\/articles\/beyond-border-radius-css-corner-shape-property-ui\/10-music-after.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"browser-support\">Browser Support<\/h2>\n<p>As of writing, <code>corner-shape<\/code> is available in Chrome 139+ and Chromium-based browsers. Firefox and Safari don\u2019t support it yet. The spec lives in <a href=\"https:\/\/drafts.csswg.org\/css-borders\/#propdef-corner-shape\">CSS Borders and Box Decorations Module Level 4<\/a>, which is a W3C Working Draft as of this writing.<\/p>\n<p>For practical use, that\u2019s fine. That\u2019s the whole point of how these demos are built. The <code>presentation<\/code> layer delivers a polished, complete UI to every browser. The <code>demo<\/code> layer is a bonus for supporting browsers, wrapped in <code>@supports (corner-shape: ...)<\/code>. I lived through the time when <code>border-radius<\/code> was only available in Firefox. Somewhere along the line, it seems like we have forgotten that not every website needs to look exactly the same in every browser. What we really want is: no \u201cbroken\u201d layouts and no \u201cyour browser doesn\u2019t support this\u201d messages, but rather a beautiful experience that just works, and can progressively enhance a bit of extra joy. In other words, we\u2019re working with two tiers of design: good and better.<\/p>\n<h2 id=\"wrapping-up\">Wrapping Up<\/h2>\n<p>The approach I keep coming back to is: don\u2019t design for <code>corner-shape<\/code>, and don\u2019t design <em>around<\/em> the lack of it. Design a solid baseline with <code>border-radius<\/code> and then enhance it. The presentation layer in every demo looks intentionally good. It\u2019s not a degraded version waiting for a better browser. It\u2019s a <strong>complete design<\/strong>. The <code>demo<\/code> layer adds a dimension that <code>border-radius<\/code> alone can\u2019t express.<\/p>\n<p>What surprises me most about <code>corner-shape<\/code> is the <em>range<\/em> it offers &mdash; the amazing powerhouse we have with this single property: <code>squircle<\/code> for that premium, superellipse feel on cards and avatars; <code>bevel<\/code> for directional elements and gem-like badges; <code>scoop<\/code> for editorial warmth and visual hierarchy; <code>notch<\/code> for mechanical precision on tags; and <code>superellipse()<\/code> for fine control between <code>round<\/code> and <code>squircle<\/code>. And the ability to mix values per corner (<code>round bevel bevel round<\/code>, <code>scoop round<\/code>) opens up shapes that would have required SVG masks or <code>clip-path<\/code> hacks.<\/p>\n<p>We went from five background images to <code>border-radius<\/code>, to <code>corner-shape<\/code>. Each step removed a category of workarounds. I\u2019m excited to see what designers do with this one.<\/p>\n<h3 id=\"further-reading\">Further Reading<\/h3>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/corner-shape\"><code>corner-shape<\/code><\/a> (MDN)<\/li>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/what-can-we-actually-do-with-corner-shape\/\">What Can We Actually Do With <code>corner-shape<\/code>?<\/a>\u201d, Daniel Schwarz<\/li>\n<li><a href=\"https:\/\/drafts.csswg.org\/css-borders\/#propdef-corner-shape\">CSS Borders and Box Decorations Module Level 4<\/a> (W3C specification)<\/li>\n<li><a href=\"https:\/\/codepen.io\/bySebastian\/pen\/VYjPzYo\">A fun demo for \u201ceco-labels\u201d<\/a>, Sebastian on CodePen<\/li>\n<\/ul>\n<div class=\"signature\">\n  <img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>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 Brecht De Ruyte 2026-03-12T10:00:00+00:00 2026-03-18T09:33:12+00:00 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\u2019t ask&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1164"}],"collection":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=1164"}],"version-history":[{"count":1,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1164\/revisions"}],"predecessor-version":[{"id":1165,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1164\/revisions\/1165"}],"wp:attachment":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=1164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/categories?post=1164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/tags?post=1164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}