Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's... an interactive visual you can mess with 🤙 CodePen.IO link below 👇show more

Here's that @CodePen link! 🚀

Bunch of people have been quoting my Q3 post on this in response to some of those satirical posts 😅 Figured I might as well roll it back out again 🤙

If you have a border present, it's good to account for that too 💯 .panel { --nested-radius: calc( (var(--radius) - var(--padding)) - var(--border) /* Account for the border 🤙 */ ); }

also! overflow-clip-margin: content-box; no math, which can be nice

This was gonna be the follow-up 🤫😅 Purely revisiting the radius - padding trend 😅

This post is cutting edge 😄

Haha – I was almost fearful of a bug in Edge being raised there 😅

I find this oddly satisfying. should pick up border radius as a hobby 😃

Thanks for the tips @jh3yy. I found an edge case where `padding` > `radius` and got it covered with: --nested-radius: max((var(--radius) - var(--padding), min(var(--padding) / 2, (var(--radius))); I use this trick all over the place for @Joy_UI_

I just saw someone ask for exactly this the other day here