Abgerundete Ecken bei Bildern

Auf vielen Websites reicht das Bild einer Karte bis an die Ränder der Karte, ohne weißen Rahmen darum. So haben wir Oskars Karte geändert: Die Klasse p-6 haben wir von der Karte auf ein neues div um den Namen, die Texte und den Button verschoben. Das Bild hat kein Padding mehr um sich herum und reicht bis an die Ränder der Karte, während die Texte ihren Abstand behalten. Und weil das Padding jetzt den Platz zwischen Bild und Namen schafft, haben wir mt-4 vom Namen entfernt.

Sieh dir aber die oberen Ecken der Karte an: Die eckigen Ecken des Bildes ragen aus den abgerundeten heraus. Abgerundete Ecken runden den Hintergrund und den Rahmen eines Elements ab, aber nicht seinen Inhalt. Das Bild wird ganz gezeichnet, mit allen Ecken.

Im CSS-Kurs hast du gelernt, dass overflow: hidden abschneidet, was nicht in die Box eines Elements passt. Auch die abgerundeten Ecken zählen dazu: Der Inhalt wird entlang von ihnen abgeschnitten. In Tailwind heißt die Klasse overflow-hidden. (Die anderen Werte gibt es auch als Klassen: overflow-auto, overflow-scroll und overflow-visible.)

Du könntest auch das Bild selbst abrunden, mit rounded-t-2xl für die oberen Ecken. Aber overflow-hidden an der Karte ist einfacher: Es funktioniert für alles, was in einer Ecke landet, und wenn du die Rundung der Karte eines Tages änderst, musst du nicht auch das Bild ändern.