The Perfect Radius

A visual demonstration of how to get a
perfect nested radius / rounded corners

- =
outer radii - gap = inner radii
Playground

Made by Nana Asamoah 

        /* Define and apply border radius and padding variables */

        :root{
          --radius: px;
          --padding: px;
        }

        /* Apply border radius and padding from variables to the parent element */

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

        /* Calculate and apply border radius for the child element by subtracting padding from the parent radius */
        
        .inner-border-radius{
          border-radius: calc(var(--radius) - var(--padding));
        }