RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools Icon
Text emphasized alt text example
A series of images of an avatar doing a bunch of skateboard tricks.

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

2 min read
css

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.

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 🤓

Mentions #

Join the conversation on

Crawl the CSS Webring?

previous sitenext site
a random site