¿Cómo puedo evitar que una imagen rebose una caja de esquina redondeada con CSS3?

Mi último Chrome, Firefox, y Safari clip de la imagen al borde del contenedor-radio (según lo previsto).

Http://jsfiddle.net/RQYnA/12/embedded/result /

En Firefox 15, veo la imagen recortada cuando el contenedor tiene {overflow: hidden}. (Recorte de contenido hijo parece haber sido añadido en Gecko 2.0.)

En Chrome 23 y Safari 5, veo la imagen recortada solo cuando el contenedor tiene {position: static; overflow: hidden} y la imagen tiene {position: static}.

Incluso cuando overflow se establece en hidden, border-radius no recorta su contenido. Esto es por diseño.

Una solución sería establecer border-radius en la imagen así como su contenedor.

<div style="border-radius: 16px; ...">
    <img src="big-image.jpg" style="border-radius: 16px; ..." />
</div>

Otra forma sería establecer la imagen como el fondo del contenedor usando background-image; pero hay problemas con este método en Firefox antes de la versión 3 (ver este error) - no es que eso te moleste demasiado.

Pruebe esta solución:

1. La imagen en la etiqueta img está presente y allí se establece el ancho y la altura.
2. Luego escóndelo con visibility:hidden. El ancho y la altura permanecen intactos.
3. Después de eso, establecerá la misma fuente que la imagen de fondo y se recortará.

<a class="thumb" href="#" style="background-image: url('./img/pic1.jpg');" title="Picture">
  <img border="0" src="./img/pic1.jpg" alt="Pic" height="100" width="150" />
</a>

#page .thumb {
background-repeat: no-repeat;
background-position: left top;
border: 3px #e5dacf solid;
display: block;
float: left;}

#page .thumb img {
display: block;
visibility: hidden;}

Ahora también hay background-clip en css3. Funciona en todos los principales navegadores. Las opciones son border-box, padding-box y content-box. En tu caso, creo que querrás usar padding-box.

-webkit-background-clip: padding-box;
-moz-background-clip:    padding; 
background-clip:         padding-box;

Si convierte la imagen en una imagen de fondo en lugar de contenido, la imagen no recortará las esquinas redondeadas (al menos en FF3).

También puede agregar un relleno al div, o un margen para la imagen para agregar un relleno adicional entre el borde redondeado y la imagen.

Un simple border-radius en la etiqueta img funciona bien en las versiones actuales de Safari 5, Chrome 16, Firefox 9:

<div>
    <img src="big-image.jpg" style="border-radius: 1em;" />
</div>

Creo que este problema ocurre cuando la imagen o el padre de la imagen es position:absolute. Esto es comprensible ya que el ajuste absoluto elimina el elemento del flujo del documento.

Estoy 90% seguro de que he visto una solución para esto, actualizaré este post cuando lo haga: D

El recorte adicional suele estar solo dentro del margen de error del grosor del borde. Simplemente deje que el radio interior sea ligeramente más pequeño para que el margen de error caiga debajo del borde en lugar de al lado de is

<div style='border-radius:5px;border:thin solid 1px;'>
   <img style='border-radius:4px' />
</div>

Debe especificar un ancho y una altura exactos con overflow:hidden, si desea que su div recorte su imagen