Border Radius Rules Every Designer Must Know

Inner radius equals outer radius minus padding. That single formula is the difference between amateur and professional-looking UI. A viral Reddit post with 2,760+ upvotes proved that designers are desperate for clear border radius rules. This guide covers everything from the golden nesting formula to Apple's secret squircle approach, with CSS code you can copy today.

What Is the Golden Formula for Nested Border Radius?

Inner radius equals outer radius minus the gap between elements. If your outer container has a 50px border-radius and 20px of padding, the inner element needs a 30px border-radius. This simple subtraction creates visually consistent curves that look intentional rather than accidental. It's the single most important border radius rule.

Why the Same Radius on Both Looks Wrong

When you apply the same border-radius to a parent and child element, the gap between their corners becomes uneven. The space at the middle of each side is narrower than the space at the corners. Your eye instantly picks up on this inconsistency even if you can't articulate what's wrong. It looks like a mistake because it is one.

As Chris Coyier from Frontend Masters puts it: "Once you see it, it'll bug you forever." This tiny detail appears on millions of websites, and the fix takes less than a minute. Every card component, every modal, every nested container in your design system should follow this rule.

The Formula in Practice

The formula works in reverse too. If you start with the inner radius, just add the padding to get the outer: Outer radius = Inner radius + Padding. Alexandra Basova's guide on building radius systems recommends starting with your most common inner element (like a button) and calculating outward from there.

There's one edge case worth noting. When the padding is larger than the outer radius, the formula gives you a negative number. In that case, set the inner radius to zero. Chris Coyier notes that zero "doesn't always feel right either" - so use your judgment. A 2-4px inner radius often looks better than a hard zero.

What Is Apple's Secret Rounded Corner Formula?

Apple uses squircles instead of standard circular border-radius curves. A squircle is a continuous curvature shape that eliminates the visible "kink" where a straight edge meets a circular curve. Look closely at any Apple product or iOS interface and you'll see corners that feel smoother than standard CSS rounded rectangles.

The Contour Bias

Apple's choice isn't just aesthetic preference. Research described in Universal Principles of Design documents the contour bias phenomenon: "When presented with objects that possess sharp angles or pointed features, a region of the human brain involved in fear processing, the amygdala, is activated." Rounded objects are literally perceived as safer and more approachable.

Closer to the Human, Rounder the Object

Arun Venkatesan discovered that Apple follows a specific pattern across all products. By measuring the corner radius relative to the shorter side of each device, he found a clear "roundness score" that correlates directly with how close the device is to your body. The pattern is remarkably consistent.

Designer Naoto Fukasawa articulated this philosophy years ago: the closer an object is to a human, the rounder it should be. Arun describes wanting to pick up the AirPods case and fidget with it "as if it were a pebble." Meanwhile, a display at arm's length can afford sharp edges without feeling uncomfortable or threatening.

How This Applies to UI Design

In interface design, the same principle translates to interactive proximity. Elements you tap directly (buttons, toggles, chips) should be rounder than elements you view from a distance (headers, page containers, navigation bars). iOS follows this pattern throughout - buttons and pills are fully rounded while large cards use moderate corner radii.

Figma supports squircle-style corners through its "smooth corners" toggle in the design panel. In CSS, true squircles aren't natively supported yet, but larger border-radius values on smaller elements approximate the effect. For pixel-perfect squircles, you'd need an SVG path or a future CSS specification.

How Do You Build a Border Radius Scale System?

Group your UI elements by their shortest side, assign semantic radius names from XS to XL, and scale proportionally so bigger elements always get bigger radii. This approach from Alexandra Basova creates a reusable system that stays consistent across hundreds of components in a design system.

Step 1: Group Elements by Size

Measure the shortest side of every element in your design. A 200x40px button groups with 40px elements, not 200px elements. Sort them into size buckets: tiny (under 16px), small (16-32px), medium (32-56px), large (56-100px), and extra large (100px+). Each group will share a radius value.

Step 2: Assign Semantic Names

Name your radius tokens semantically rather than using pixel values. Use XS, S, M, L, XL, and Full (for pill shapes). This way, when you adjust values later, every component updates automatically. A design system with "radius-M: 8px" is easier to maintain than 47 components with hardcoded "8px" scattered throughout.

Reference Scale Values

Here's a practical scale based on Telerik's design system and Material Design 3:

Step 3: Calculate Nested Radii

Once your scale is set, apply the golden formula to every nested combination. A modal with L radius (12px) and 16px padding means buttons inside it need a calculated radius. Since 12 - 16 = negative, the button keeps its own S or M radius. Document these combinations in your design system so developers don't guess.

Step 4: Separate Border Radii

Borders need their own radius calculations. If you use inner borders (inside the element box), the border radius matches the element radius. If you use outer borders (outside the element box), add the border width to the radius. Basova recommends naming border radii separately (like "M Border") so designers don't accidentally mix them with shape radii.

How Does Border Radius Affect User Perception?

Border radius directly communicates brand personality and affects how users feel about your interface. Small radii signal professionalism and authority. Large radii communicate friendliness and approachability. Sharp corners trigger subtle stress responses in the brain. Choosing the right radius isn't a style preference - it's a UX decision.

The Psychological Spectrum

The macOS Sequoia update sparked heated debate among designers when Apple adjusted corner radii across the system interface. As Basova noted in her article, "People love perfectly polished interfaces and notice even the tiniest inconsistencies." A 2px change in border radius can shift how an entire interface feels - that's how sensitive human perception is to this detail.

Industry Patterns

Banking and financial apps predominantly use 2-4px radii because customers need to feel the interface is precise and trustworthy. Social media platforms use 12-20px radii to feel inviting and casual. Gaming interfaces often mix sharp and rounded corners to create visual energy and excitement. Match your radius to your audience's expectations.

What Are the 6 Most Common Border Radius Mistakes?

The six most common border radius mistakes are: using the same radius on nested elements, applying radius to everything uniformly, mixing rounded and sharp corners on siblings, using identical styling for primary and secondary CTAs, not scaling radius with element size, and forgetting to round images inside cards. Here's how to fix each one.

1. Same Radius on Nested Elements

This is the most widespread mistake in UI design. Applying border-radius: 16px to both a card and the button inside it creates that awkward uneven gap. The fix is the golden formula: Inner = Outer - Padding. It takes 10 seconds to calculate and immediately makes your design look more professional.

2. Overusing Border Radius on Everything

Not every element needs rounded corners. Applying border-radius uniformly across an entire interface makes everything blend together and removes visual hierarchy. Be intentional. Use sharp corners for elements that need to feel structured (tables, code blocks, data grids) and rounded corners for interactive and friendly elements.

3. Mixing Rounded and Sharp on Siblings

Placing a sharp-cornered element next to a rounded one at the same hierarchy level creates visual tension. Two buttons side by side should share the same radius. Two cards in a grid should match. Consistency within groups matters more than having one "correct" radius value across your entire design system.

4. Same Styling for Primary and Secondary CTAs

If your primary button is a fully rounded pill and your secondary button is also a fully rounded pill (just outlined), users struggle to distinguish the action hierarchy. Differentiate buttons by shape, not just color. A primary pill button paired with a secondary rectangular button creates clear visual hierarchy that guides user attention.

5. Not Scaling Radius With Element Size

A 16px border-radius on a small 32px chip makes it look like a pill. The same 16px on a 400px card barely registers as rounded. Scale your radius values proportionally to element size. This is why a systematic approach with size-based grouping works better than a single universal radius value applied everywhere.

6. Forgetting Image Radius Inside Cards

A rounded card with a square-cornered image at the top looks broken. The image corners need to match the card's inner radius (using the golden formula). In CSS, the easiest fix is overflow: hidden on the card container, which automatically clips the image to the card's rounded shape. In Figma, enable "clip content" on the frame.

How Do You Implement Border Radius Correctly in CSS?

Use CSS custom properties to define radius and padding on the parent, then use calc() on the child element. This approach ensures nested radius values update automatically when you change the parent's radius or padding. It's the cleanest, most maintainable pattern for handling nested rounded corners in production code.

The Standard Approach

.card {
  --radius: 24px;
  --padding: 12px;
  border-radius: var(--radius);
  padding: var(--padding);
}

.card__inner {
  border-radius: calc(var(--radius) - var(--padding));
}

This pattern scales across your entire design system. Define the variables once in your token file, reference them in every component, and every nested radius stays mathematically correct. When the design team changes the card radius from 24px to 16px, every inner element adjusts automatically without manual updates.

Design System Tokens

:root {
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --radius-full: 9999px;
}

Map these tokens to your component library. Cards use --radius-l, buttons use --radius-m, avatars use --radius-full. When you change --radius-m from 8px to 6px, every button, input, and dropdown updates simultaneously. This is the foundation of scalable CSS architecture for border radius.

The Overflow Clip Trick (Future CSS)

.parent {
  border-radius: 24px;
  overflow: clip;
  overflow-clip-margin: content-box;
}

This emerging CSS technique clips children to the parent's content box, automatically giving them the correct corner shape without needing their own border-radius. Chris Coyier highlights this solution from Adam Argyle, but notes it's not yet cross-browser ready. Watch this space - it's the future of nested corners in CSS.

Handling the Edge Case

.card__inner {
  /* Prevents negative values */
  border-radius: max(0px, calc(var(--radius) - var(--padding)));
}

/* Or for a minimum radius */
.card__inner {
  border-radius: max(4px, calc(var(--radius) - var(--padding)));
}

When padding exceeds the outer radius, the formula produces a negative number. CSS will treat negative border-radius as zero, but using max() makes your intention explicit and lets you set a minimum radius. A 4px minimum often looks better than a hard zero, especially on interactive elements like buttons.

How Do You Handle Border Radius in Figma?

Figma supports individual corner radius, smooth corners (squircle mode), and proportional scaling. Press "K" to scale an element and its border radius proportionally. Enable "smooth corners" in the design panel for Apple-style squircle curves. Use Auto Layout padding with the golden formula to maintain perfect nested corners automatically.

Key Figma Features

• Individual corners - Click the corner radius field's icon to set each corner independently (top-left, top-right, bottom-right, bottom-left)
• Smooth corners toggle - Switches from circular arcs to continuous curvature (squircle). Find it in the design panel's corner section
• Scale tool (K) - Scales radius proportionally with the element. Resize a 100px square with 10px radius to 200px and the radius becomes 20px
• Clip content - Enable on frames to automatically clip child elements to the parent's rounded shape. Equivalent to CSS overflow: hidden

Setting Up Radius Variables in Figma

Create a variable collection called "Radius" with your scale tokens (XS through Full). Apply these variables to component border-radius properties instead of hardcoded pixel values. When you update the variable, every instance across your design file updates automatically. This mirrors how CSS custom properties work in production.

Border Radius Quick Reference Cheat Sheet

This cheat sheet summarizes every rule from this guide into a scannable reference. Save it, share it with your team, and refer to it when building components. The golden formula alone will fix 80% of border radius issues in any design system or codebase.

The Rules

• Rule 1: Inner radius = Outer radius - Padding (the golden formula)
• Rule 2: Scale radius proportionally with element size
• Rule 3: Use semantic tokens (XS-XL), not hardcoded pixel values
• Rule 4: Match sibling elements - consistent radius within groups
• Rule 5: Differentiate button hierarchy by shape, not just color
• Rule 6: Use clip/overflow to handle image corners inside containers
• Rule 7: Closer to the user = rounder (Apple's principle)
• Rule 8: Small radius = formal, large radius = friendly

Quick Values

Frequently Asked Questions

What is the formula for nested border radius?

Inner radius equals outer radius minus padding. If your outer element has a 50px border-radius and 20px of padding, the inner element should have a 30px border-radius (50 - 20 = 30). Using the same radius on both creates an uneven, amateur-looking gap. This single fix transforms the polish of any UI design.

Why does Apple use squircles instead of regular rounded corners?

Apple uses squircles because standard CSS border-radius creates a visible kink where the straight edge meets the circular curve. Squircles use a continuous curvature transition that eliminates this discontinuity. iOS, macOS, and all Apple hardware follow this approach. Figma supports this via the "smooth corners" toggle in the design panel.

What border radius values should I use in my design system?

Use a semantic scale based on element size: XS (2px) for checkboxes and badges, S (4px) for chips and small buttons, M (8px) for cards and inputs, L (12-16px) for modals and large containers, XL (20-24px) for hero sections, and Full (9999px) for pill shapes. Scale radius proportionally - bigger elements always get bigger radii.

Do rounded corners actually affect user behavior?

Yes. The contour bias phenomenon shows that sharp angles activate the amygdala, the brain's fear processing center. Rounded corners are perceived as friendlier and safer. Small radii feel formal and enterprise-focused, large radii feel cozy and approachable, and no radius feels technical and editorial. The radius choice directly impacts brand perception.

How do I implement nested border radius in CSS?

Use CSS custom properties on the parent: set --radius and --padding, then apply calc(var(--radius) - var(--padding)) on child elements. Use max(0px, calc(...)) to prevent negative values. A future CSS solution uses overflow: clip with overflow-clip-margin: content-box, which automatically clips children to the parent's rounded shape.

What is the most common border radius mistake?

Using the same border-radius value on both parent and child elements. This creates an uneven gap where corners look thicker than the straight sides. The inner element needs a smaller radius calculated by subtracting the padding from the outer radius. This single fix dramatically improves the professional quality of any UI design.

• Reddit r/Design - Border Radius Rules (2,760+ upvotes)
• Alexandra Basova - Building a Consistent Corner Radius System in UI (Medium, Oct 2025)
• Designary - UX Tip #6: Perfect Nested Rounded Corners
• Arun Venkatesan - The Secret Formula for Apple's Rounded Corners
• Chris Coyier / Frontend Masters - The Classic Border Radius Advice, Plus an Unusual Trick
• Interactively.info - Perfect Nested Rounded Corners
• Jitendra Kumar - Getting Your Border Radius Right (Medium, Oct 2024)
• Telerik Design System - Border Radius Guidelines
• Material Design 3 - Shape & Corner Radius Scale
• UIDesign.tips - Consistent Border-Radius

Alan Ayoubi

Creative Instructor

Alan Ayoubi teaches creative software to thousands of students worldwide on 92learns.