Perfect Nested Rounded Corners

If you had to use border-radius for nested elements before, you might have realized something. To make it look aesthetic, the value of the border-radius for the two of them should not be the same. The example below shows how it looks when you use the same value for both of them. That doesn't look aesthetic at all! The gap between the two elements doesn't look the same, and also some of the parts are widening.

There can be several ways to fix this look. One of them is reducing the value of the inner element's border-radius to below the outer element's until it looks more appealing.

But we need a more stable and simpler solution than that. The main thing that affects appearance the most is the gap between the two elements. That is why this gap plays a leading role in our solution. To fix this problem in an ideal way, subtract the gap between two elements from the border-radius value of your outer element, and you will get the perfect border-radius value for your inner element!

@aykutkardas