Rounded Corners on Pictures

On many websites, a card's picture reaches all the way to the card's edges, without a white frame around it. We've changed Oscar's card that way: we've moved the class p-6 from the card to a new div around the name, the texts and the button. The picture no longer has padding around it, so it reaches the edges of the card, while the texts keep their distance. And because the padding now makes the space between the picture and the name, we've removed mt-4 from the name.

But look at the top corners of the card: the picture's square corners stick out of the rounded ones. Rounded corners round the element's background and border, but not its content. The picture is drawn whole, corners and all.

In the CSS course, you learned that overflow: hidden cuts off whatever doesn't fit into an element's box. The rounded corners count, too: the content gets cut off along them. In Tailwind, the class is overflow-hidden. (The other values work as classes too: overflow-auto, overflow-scroll and overflow-visible.)

You could also round the picture itself, with rounded-t-2xl for its top corners. But overflow-hidden on the card is simpler: it works for anything that ends up in a corner, and if you change the card's rounding one day, you won't have to change the picture as well.