Card-Image benötigt Border-Radius

Beschreibung:
Das <img>-Element innerhalb der Card übernimmt aktuell keinen Border-Radius. Dadurch legt sich das Bild über den Rand der Card und bricht die optische Gestaltung.

Schritte zur Reproduktion:

  1. Eine Card mit Bild anzeigen.
  2. Beobachten, dass das Bild eckig bleibt und über den Card-Rand hinausragt.

image

Erwartetes Verhalten:
Das <img>-Element sollte denselben Border-Radius wie die Card besitzen, damit es optisch sauber abschließt.

Lösungsvorschlag:
Dem <img> in der Card den entsprechenden border-radius (z.B. inherit oder denselben Wert wie die Card) zuweisen: var(--kern-metric-border-radius-default, 4px)

Edited by Tom Marienfeld