La imagen se sale de las esquinas
El síntoma: El borde redondeado no funciona
Le pones border-radius: 20px; a una tarjeta (card), pero la imagen que está pegada arriba sigue teniendo las esquinas en punta, rompiendo la estética redondeada.
Esto ocurre porque la imagen es un contenido que se dibuja "encima" del borde del padre. El padre es redondeado, pero la imagen se desborda.
La solución: Cortar el exceso
Para solucionar esto sin tener que ponerle el mismo border-radius a cada imagen individualmente, usamos overflow: hidden; en el contenedor padre. Esto obliga a todo lo que hay dentro a quedarse "encerrado" en la forma del padre.
También podrías poner inherit el border-radius cada esquina de la imagen, pero es más largo.
Arréglalo ahora
Verás una tarjeta con borde redondeado, pero la foto del gato tiene esquinas afiladas. Aplica la propiedad al padre para "recortar" la imagen.
<style>
.tarjeta {
width: 250px;
border: 2px solid #333;
border-radius: 30px;
background: #fff;
/* Añade aquí la propiedad para que el hijo no se salga */
}
img {
width: 100%;
display: block;
}
</style>
<div class="tarjeta">
<img src="imgs/estrellas.jpg" alt="Estrellas">
<p style="padding: 10px;">Esquinas suaves.</p>
</div>