The Classic Border Radius Advice, Plus an Unusual Trick

One million years ago (approximately) I posted about the awkward look when you nest elements that both have the same border-radius. I wrote:

There probably is some fancy math you could do to figure out the perfect values, but I find eyeballing it works pretty well.

I didn’t credit anyone, but I was so young in my career then I have to imagine I heard this advice elsewhere and turned it into a blog post of my own, so sorry if there is an actual first source. But maybe it’s just the kind of general advice that people to on their own after noticing it and share. It very much goes around once in a while, and I’m glad it does because once you see it, it’ll bug you forever — so let’s fight it with knowledge.

I stand by my advice:

• Notice it
• Tweak the inner until it looks right.

I get that the real math is outer - padding = inner but I find that’s a little too simplistic in practice. If your outer is 10px and the padding is any more than 10px (highly common), that means the inner is 0 and zero just doesn’t feel right either.

I love it when the Web Platform Powers That Be talk about things like this though. This is a small issue that comes up a billion times across a ton of websites, so it should be up for consideration that there becomes a better way.

Adam Argyle kicked off the conversation a few years ago and it’s trickling along it seems. His blog post explains more, an offers the latest solution:

.parent {
  overflow: clip;
  overflow-clip-margin: content-box;
}Code language: CSS (css)

With this solution, the child elements don’t need their own border-radius at all. They just get clipped (basically like overflow: hidden) but the clipping now happens inside the padding (that’s what content-box means). Clever stuff, but not really cross-browser ready.

I like the trick, but I don’t love that clipping overflow is absolutely required to do it. If standards gets more involved, I would think they could find a better way.

I was just thinking about all this again because I happened to notice that the problem can show itself when using multiple shadows. So I suppose I wouldn’t hate it if a solution made that nicer in the future as well.