RSS FeedTwitterMastodonShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconMedia 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

123 likes
22 reposts
  • Stefan TRMSC | eduBW
  • Apple Annie :prami:
  • Julian Schmidt
  • Aykhan Huseyn
  • Tyler Sticka
  • Benoit C.
  • Daine Mawer
  • Luis Vaz // Rastrian
  • Rychillie
  • Viator
  • Elly Loel ✨🌱
  • Javier Iglesias García
  • Jon Croce
  • clip studio pain
  • ユイト🍊
  • Robert Vera
  • Agénor Debriat
  • Astrit
  • Bramus
  • Terry
  • Ahmet Işıtan Narlı
  • bartoszholubowicz

Member of a CSS Webring

Try a site in the ring!
PreviousRandomNext