htmlcsscard

How to stack cards of different sizes with the same rounded corners like in the image?


How to stack cards of different sizes but with the same rounded corners in css? For example one card has width of 357px and height of 422px and the other card has a width of 426px and height of 208px. If I add to both a border radius of 10% they both dont have the same rounded corner due to their different sizes. How to solve this porblem in css?


Solution

  • You could put the same fixed border-radius to both elements, like border-radius: 10px;

    If you want it to be responsive, you could use vw or vh.