A use case for CSS overflow-clip-margin, nested border radii

With a mega viral tweet on nesting border radii and Andy mentioning it as well , I felt I should blog about my thoughts real quick! Here's one of the things I learned after requesting CSS get a nice way to draw nested radii : .the-trick-tldr { overflow : clip ; overflow-clip-margin : content-box ; } If you're like me, you saw that and said… The prob # Nested border curves. When you've got a rounded card with a rounded button inside, or a rounded footer inside a rounded section, you may not have noticed, but there's a wobble in there. See the nested radii on the left here 🙈, vs the radii on the right ✅: Click those tweets or read the CSSWG proposal for more about the problem space and calculations for solutions. Using overflow-clip-margin to solve it # In the comments of the CSSWG issue, Oriol Brufau politely mentions using overflow on the content-box with overflow-clip-margin . And it works great, but Caniuse shows you how it's not really viable yet: tldr; No Safari Firefox doesn't support the content-box value … Chrome only. Try yourself # Here's a Codepen where I show the problem space and offer a custom property and overflow-clip-margin solution, for testing and comparing. See the Pen by Adam Argyle ( @argyleink ) on CodePen . It's totally worth opening in a tab in Chrome and inspecting that card for it's funky coo content-box overflow: clip solution, and kickin the tires 🤓