20px
36px
16px
Fast and intuitive radius calculations
Learn more about the math
Visual inconsistency - inner corners appear sharper
Visual harmony - consistent corner curvature
Using the same radius for both outer container and inner content creates visual inconsistency. The inner content appears to have sharper corners than intended.
outer_radius = inner_radius = 20pxStart with your desired inner content radius, then add padding. The outer radius adjusts automatically to maintain visual consistency.
outer_radius = inner_radius + paddingouter_radius = inner_radius + paddingProper radius calculations ensure visual harmony between nested elements. Without this adjustment, designs look inconsistent and unprofessional.