November 2023
Have you ever noticed when looking at an interface or design, that the curvature of a parent container compared to it's child just feels off? This is because of a common misconception that setting the border-radius of a parent container to the same value as the border-radius of a child container will result in a perfect match.
As you may have guessed by now, this isn't the case. If you need proof, refresh the page and look at the demo above. The outer square and inner square are both set to have a border-radius of40px, but when looking at the image, you can see that the curvature doesn't line up visually.
The solution to this problem is to set the border-radius of the parent container to the sum of the inner border-radius, and the padding between the two. In the demo above, try changing the inner radius, outer radius, and padding to see where the sweet spots occur.
