I was recently designing an interface with a lot of rounded corners. But, when I nested rounded corners it looked off somehow...

MystPi

Gleam

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

The Math Behind Nesting Rounded Corners is the math behind nesting rounded corners. To nest one circle inside of another, the inner circle needs a smaller radius than the outer circle.

The Math Behind Nesting Rounded Corners

I’ve struggled with this exact issue before! Excellent explanation to solve this fun problem.

I get this, but whenever I use use border radius it is more like a oval 😂

Thinking in circles and a neat math usage.

Interesting read, I will remember that equation 👍