-webkit-border-radius no recorta la imagen correctamente

Question

Tengo 5 navegadores para representar páginas con código html: IE9, Firefox 4.0 y todas las versiones más recientes de Chrome, Safari y Opera. Ahora en IE9 y Firefox 4.0 se está recortando una imagen correctamente al usar border-radius: y -moz-border-radius: pero falla en Opera, Chrome y Safari usando -webkit-border-radius :. Con Opera, la imagen no se recorta en absoluto y, con Safari y Chrome, la imagen está un tanto recortada pero con el borde recortado también.

.nonTyp{ 
margin: 15px 15px 15px 15px; 
border:4px inset #C1C8DD; 
border-radius:25px; 
-moz-border-radius:25px; 
-webkit-border-radius:25px; 
width:200px; 
height:200px; 

}

Si usted tiene uno de los 3 navegadores mencionados que utilizan webkit-border-radius: por favor ver las imágenes, por ejemplo, de lo que tengo un problema con: Graphics Page

Answer 1

Lo que podría hacer es poner todo el estilo que está en la etiqueta <img> ahora, en el padre <a> en su lugar para usarlo como el contenedor de la imagen. Esto, al menos para mí, tiene más sentido también. No olvides mantener float: left en la imagen para deshacerte del margen inferior fantasma.

Answer 2

I creo que es porque está en el primer plano por encima de la frontera

intente utilizar el mismo código que tiene encima, pero en su html:

<div class="nonTyp" style="background-image:url('image.jpg');"></div> 

Answer 3

Esto probablemente tiene que ver con el orden en que se aplica el clip de borde contra radio, pero es muy extraño. Una solución es mover el radio del borde y las definiciones relacionadas a la etiqueta adjunta. Recuerde declarar display:block por lo que se trata como nivel de bloque en todos los navegadores.

Answer 4

Creo que las funciones de dibujo que utiliza Chrome para la imagen y el enlace funcionan de manera diferente entre sí. Y eso causa un espacio en blanco entre la imagen y el enlace.

Reparado parcialmente este error modificando un poco el código jsfiddle de Matjis. Moví la posición de las etiquetas img a la izquierda.

.gallery a img { 
... 
position:relative; 
left: 2px; 
} 

Esta solución puede funcionar si cambia diferentes valores de radio para la imagen y el enlace.

Answer 5

Esto funcionó para mí en Chrome y Safari.

La imagen es de primer nivel.

div.someclass con radio 5px y div.someclass img con radio 4px.

Eso parece hacer que las esquinas se vean más limpias en Chrome y Safari.

.someclass { 
    ... 
    border: 1px solid #000; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
      border-radius: 5px; 
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
    -webkit-box-shadow: 0px 0px 5px #000; 
    -moz-box-shadow: 0px 0px 5px #000; 
      box-shadow: 0px 0px 5px #000; 
} 

.someclass img { 
    ... 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
      border-radius: 4px; 
}