When nesting UI elements, using the same corner radius for parent and child elements can cause inconsistent padding, leading to an unappealing visual design.
To create a more consistent visual gap, it's effective to use a slightly smaller corner radius for the child element compared to the parent, enhancing the overall design.
The formula for setting different radiuses is: Outer radius = Inner radius + Padding. This helps maintain similar curvature while ensuring a balanced appearance.
Be aware that this formula isn't universal. Testing visually is crucial, as reliance solely on mathematical calculations may not yield the desired outcome.
[
Collection
]
[
|
...
]