tabla - redondear bordes css

¿Cómo evito que una imagen desborde un recuadro redondeado con CSS3?

Question

Si utilizo este código, la imagen no queda recortada por las esquinas redondeadas del div (lo que da como resultado que las esquinas cuadradas de la imagen cubran las redondeadas del div):

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

¿Alguien sabe cómo obtener un div de corder redondeado para evitar que se desborde la imagen de un niño?

Answer 1

Ahora también hay clip de fondo 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;

Answer 2

Creo que este problema ocurre cuando la imagen o el padre de la imagen es posición: absoluta. Esto es comprensible ya que la configuración absoluta elimina el elemento del flujo del documento.

Estoy 90% seguro de haber visto una solución para esto, actualizaré esta publicación cuando lo haga: D

Answer 3

Debes especificar un ancho exacto y un alto con desbordamiento: oculto, si quieres que tu div grabe tu imagen

Answer 4

El recorte adicional generalmente está dentro del margen de error del grosor del borde. Simplemente deje que el radio interno sea un poco más pequeño para que el margen de error quede debajo del borde en lugar de al lado de

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

Answer 5

Esto puede funcionar o no en su situación, pero considere hacer que la imagen sea un fondo CSS. En FF3, lo siguiente funciona bien:

<div style=" background-image: url(big-image.jpg); border-radius: 1em; height: 100px; -moz-border-radius: 1em; width: 100px;" ></div>

No estoy seguro de que haya otra solución: si aplica un borde a la imagen en sí (digamos, 1em profundidad), se obtiene el mismo problema de las esquinas cuadradas.

Editar: aunque, en el caso "agregar un borde a la imagen", el recuadro de la imagen es correcto, es solo que la imagen no está al ras con el elemento div . Para ver los resultados, agregue style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" a la etiqueta img (con width y height establecidos apropiadamente, si es necesario).

Answer 6

Incluso cuando el overflow está configurado como hidden , border-radius no recorta su contenido. Esto es por diseño.

Una solución sería establecer border-radius en la imagen y 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 fondo del contenedor utilizando background-image ; pero hay problemas con este método en Firefox antes de la versión 3 (mira este error ), no es que eso te moleste demasiado.

Answer 7

Mi último Chrome, Firefox y Safari recortan la imagen en el radio del borde del contenedor (como estaba previsto).

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

En Firefox 15, veo la imagen recortada cuando el contenedor tiene {overflow: hidden} . (El recorte del contenido secundario parece haberse agregado en Gecko 2.0 ) .

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

Answer 8

Pruebe esta solución alternativa:

1. La imagen en la etiqueta img está presente y allí estableces el ancho y el alto.
2. Luego ocúltelo con visibility:hidden . El ancho y la altura permanecen intactos.
3. Después de eso, configurará 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;}

Answer 9

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 podría agregar un relleno al div, o margen de la imagen para agregar un relleno extra entre el borde redondeado y la imagen.

Answer 10

Un border-radius simple 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>