border-radius en Chrome error?

Question

que tienen un problema con la frontera de radio en cromo este es mi código:

img{ 
border-radius: 24px; 
border: 2px solid #c7c7c7;     
-moz-border-radius:24px; 
-webkit-border-radius: 24px; 
} 

En Mozzila funciona bien, pero en el cromo se ve rara ... En Mozzila puedo ver un círculo que bordea mi imagen, pero en el cromo del círculo recorta los bordes y todo lo que puedo ver son en línea recta

una captura de pantalla: http://postimage.org/image/27turq0mc/

puede ayudar?

Answer 1

esto es probablemente un error de Chrome. Una solución podría ser la de envolver el img con un div y hacer el siguiente CSS:

img{     
    -moz-border-radius:24px; 
    -webkit-border-radius: 24px; 
    border-radius: 24px; 
    display:block; 
} 
div { 
    border: 2px solid #c7c7c7; 
    border-radius: 24px; 
    -webkit-border-radius: 24px; 
    width:40px; /* the width of image */ 
    height:40px; /* the height of image */ 
} 

Demostración:http://jsfiddle.net/EnmMp/1/

Answer 2

Intente hacerlo en una imagen de fondo en lugar de en un elemento html img, ya que algunos elementos img no funcionan con el radio de borde (sin embargo, i gueass).

div.something{ 
background-image:url(something.png); 
border-radius: 24px; 
border: 2px solid #c7c7c7; 
border-radius: 24px; 
} 

Answer 3

que tenían el mismo problema y la solución proporcionada por:

http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

corrigió el problema.

Primero muestra la solución usando solo CSS3 & HTML y luego presenta la solución usando JQuery.

Answer 4

en lugar de sólo el código de abajo para la frontera

-moz-border-radius: 2px 2px 15px 15px; 

Para el área para ser aplicado a partir agujas del reloj desde arriba a la izquierda, no se puede hacer eso por Webkit en el momento. Así que hay que escribirlo larga mano como:

-webkit-border-top-left-radius: 2px; 
-webkit-border-top-right-radius: 2px; 
-webkit-border-bottom-left-radius: 15px; 
-webkit-border-bottom-right-radius: 15px;