Tailwind 101 - Rounded Corners

Hey folks!

While building UIs with Tailwind, we often run into situations where we have nested rounded corners

Recently, I found a neat trick to make them look much better — and it’s surprisingly simple yet super effective. Especially in cases where your nested border radii depend on each other, this can save a lot of trial and error!

Usually, when we try to balance the rounded corners (like in concentric circles or layered containers), we end up manually tweaking values again and again.
But my friend, there’s a simple math formula that makes life easier 👇

To calculate the inner container’s (child) border radius:

calc(parent border radius - parent padding) 

Yes, that’s it! 🎉

Let's see how it works in tailwind with code examples

Step 1: Define Variables in Tailwind

<div class="
p-(--card-padding) 
rounded-(--card-radius) 
[--card-padding:--spacing(3)] 
[--card-radius:var(--radius-4xl)]"> 
</div> 

What’s happening here?

• We’re defining custom CSS variables in Tailwind.

• --card-padding and --card-radius are our variables for the parent container.

• Tailwind tokens like spacing(3) and radius-4xl are used inside variables to keep everything consistent with the design system.

💡 Pro tip :
We already have utility classes like rounded-4xl, so why use --radius-4xl inside a variable? Because utility classes are static, and they can’t be used inside dynamic calculations like calc().

With variables, we can plug these values into dynamic formulas. 🙌

Step 2: Use calc() for Child Radius 🧩

Now, for the child container, we’ll use the calc() function to dynamically adjust the border radius:

rounded-[calc(var(--card-radius)-var(--card-padding))]

✅ This ensures the child element’s border radius perfectly balances with the parent, even if you change padding or radius later!

🔥 Final Thoughts

• ✅ Reusable variables: We define padding and radius once, and reuse them wherever needed.

• ✅ Dynamic calculations: Child elements automatically adjust their radius based on the parent.

• ✅ Less manual work: No more guesswork or constant tweaks!

  
  if you want to try this hands-on
  https://play.tailwindcss.com/YVFELsjab5
  
  Happy building!