When you nest an element or image inside of a card and both have border-radius and padding, the border between the card and nested element can appear thicker at the corners, making it appear incongruent with the overall border of the card.
In the image below you’ll see the outer border In the image below you’ll see the outer border on the left and right edges of the card appear sharper on the left and right edges of the card appear sharper than the image.
It can also be further complicated if you’re using CSS variables which themselves may be defined by a function like clamp() to define padding to account for different screen sizes.
The solution is simple math: make the border-radius of the nested element equal to the border-radius minus the padding between the card and nested element, giving the card a more polished and professional appearance.
And it’s simple to implement with one line of code on the nested element using the existing CSS variables and a calc() function.
When you’ve applied the calc function, you’ll have a card outer border radius that appears consistent with the image border radius.
Before
After
Best of all, since you’re using variables, if you change CSS properties in the root declaration, it will automatically fix itself on the front-end of your site.
Solution via Kevin Powell, Nick Arce, and @tunayani.