TailwindCSS Tip : How to Create perfect Inner-Outer Border Radius
Learn how to create a seamless and aesthetically pleasing inner-outer border radius using TailwindCSS utilities.
Last edited :The Problem
When nesting elements with border radius, mismatched corners can create visual inconsistencies:
The Solution
Use CSS variables and calc()
to maintain perfect proportions between outer and inner radius:
<div class="border rounded-[calc(var(--radius)+var(--padding))] p-(--padding)">
<div class="rounded-(--radius)">
<!-- Perfect nested radius -->
</div>
</div>
How It Works
The formulas is simple:
- Outer radius = Inner radius + Padding
- Inner radius = Outer radius - Padding
This ensures the curves align perfectly regardless of padding size.
The deference between the two formulas
The two formulas serve different purposes depending on what you’re trying to calculate:
-
Outer radius = Inner radius + Padding
Use when: You have a inner element with a fixed border radius and want to calculate the correct outer radius
<div class="border rounded-[calc(var(--radius)+var(--padding))] p-(--padding)"> <div class="rounded-(--radius)"> <!-- Perfect nested radius --> </div> </div>
-
Inner radius = Outer radius - Padding
Use when: You have a parent element with a fixed border radius and want to calculate the correct inner radius
<div class="border rounded-(--radius) p-(--padding)"> <div class="rounded-[calc(var(--radius)-var(--padding))]"> <!-- Perfect nested radius --> </div> </div>
Real-World Examples
Here are some examples of how you can use this technique in real-world scenarios:
Card with Image
The border radius of the card is calculated by adding the padding to the inner radius.

Product Title
$19.99When nesting elements with border radius, mismatched.
<div class="max-w-sm mx-auto border rounded-[calc(var(--radius)+var(--padding))] p-(--padding) grid gap-4 [grid-template-columns:auto_1fr] dark:border-gray-800 dark:bg-gray-800/25">
<div class="w-24 rounded-(--radius) border dark:border-white/5 overflow-hidden">
<img
class="size-full object-cover"
src="https://ui.tailus.io/images/store/bonnet.webp"
alt="Demo"
/>
</div>
<div class="py-2 pr-4">
<div class="flex flex-wrap gap-2 justify-between">
<h3 class="font-medium text-title">Product Title</h3>
<span class="text-sm text-gray-600 dark:text-gray-400">$19.99</span>
</div>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">When nesting elements with border radius, mismatched.</p>
<div class="mt-4 pt-4 border-t dark:border-gray-800">
<button class="text-sm px-3 h-8 rounded-lg bg-gray-100 text-gray-950 dark:bg-gray-800 dark:text-white">Buy Now</button>
</div>
</div>
</div>
Subscribe Form 1
The border radius of the button is calculated by subtracting the padding from the outer radius.
<div class="grid [grid-template-columns:1fr_auto] items-center w-full max-w-sm min-h-12 rounded-(--radius) py-(--padding) pr-(--padding) text-sm border border-gray-200 shadow-sm shadow-gray-950/5 has-[input:focus]:ring-2 has-[input:focus]:ring-primary-600 has-[input:focus]:border-transparent dark:bg-gray-800/25 dark:border-gray-800">
<input
type="email"
class="h-full pl-[calc(var(--padding)+0.75rem)] text-sm bg-transparent outline-hidden peer"
placeholder="Enter your email"
required
/>
<button class="min-h-8 h-full px-3.5 rounded-[calc(var(--radius)-var(--padding))] flex items-center justify-center bg-indigo-600 text-white hover:brightness-90 transition-[filter] duration-300">Subscribe</button>
</div>
Subscribe Form 2
The border radius of the parent container is calculated by adding the padding to the inner radius.
<div class="grid [grid-template-columns:1fr_auto] rounded-[calc(var(--radius)+var(--padding))] items-center w-full max-w-sm min-h-12 py-(--padding) pr-(--padding) text-sm border border-gray-200 shadow-sm shadow-gray-950/5 has-[input:focus]:ring-2 has-[input:focus]:ring-primary-600 has-[input:focus]:border-transparent dark:bg-gray-800/25 dark:border-gray-800">
<input
type="email"
class="h-full pl-[calc(var(--padding)+0.75rem)] text-sm bg-transparent outline-hidden peer"
placeholder="Enter your email"
required
/>
<button class="min-h-8 h-full px-3.5 rounded-(--radius) flex items-center justify-center bg-indigo-600 text-white hover:brightness-90 transition-[filter] duration-300">Subscribe</button>
</div>
Best Practices
- Use CSS Variables: Makes it easier to maintain and update values
- Consider Mobile: Test different sizes on smaller screens
- Maintain Proportions: Keep padding proportional to border radius
- Account for Content: Ensure inner content has enough space
Become 70x More Confident with TailwindCSS
Elevate your TailwindCSS skills with over 70 expert-crafted tips. Get access to 50 actionable tips today and start building faster, smarter, and more confidently.