@1IMperaDOR0
Posted
Good code my friend!
I believe the problem is that the top edges have a curve on the inside and should only have one on the outside, right? Look, in the resolution of the colored edges of each card, border-radius, I believe it would only be changed from 5px to 3px or increase the border-top from 3px to 5px. This was the simplest solution I found.
@vladzen13
Posted
@1IMperaDOR0 yes indeed playing with values can hide the problem, but i was hoping to find cleaner css solution, which also complies with figma design
@vladzen13
Posted
@1IMperaDOR0 so i found a way to solve it. if you set up border-radius for every corner individually - you can set curvature of the corner with 2 different axis.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius
so this seems like perfect solution: border-top-left-radius: 5px 3px; border-top-right-radius: 5px 3px;
you have 5px border-radius on top just like in figma, but you don't have strange arc below.