CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

Here's that @CodePen link! 🚀

@CodePen I have an interactive article where I explain the logic here. ✨ 👉🏻

No SoundCloud 😞 But. If you're a developer who wants to pick up some more design skills, my "soon-to-be wife"(👀) has written a book and it's 45% off 👇 Grab a copy! 🔥

@CodePen From a design standpoint this is a great best practice. From an implementation standpoint, I typically don't like to have dynamic css for static code. Assuming the border radius base value and the padding never change, I'd move this into the preprocessor rather than use a calc

@CodePen Smart!

@CodePen Giving control to the user is fundamental to enhancing the experience to their likeness, great work on building some tooling 🙏👌. Btw I'm curious about your opinion of I made the tooling there with Preact signals 👀.

@CodePen @iCota4G

@KevinJPowell @CodePen So useful! thanks for sharing! =)

@CodePen 🙏 Bless you I’m putting this into practice today as a reusable scss mixin

@CodePen I am right now building a tic tac toe game, and put border radius for a parent and child, and it looked weird, and then I remembered this and searched it up and thank god I found it. Thank you so much!!