Problema con padding e imagen redonda

[jpa]

Os comento una cuestión que me está quitando el sueño respecto a la manera en la que se visualiza el padding de una imagen redondeada con css3

Os pongo en antecedentes.

Estoy desarrollando una web en la que utilizo una imágen representativa de cada producto. Parto de una imágen cuadrada a la que le aplico la siguiente clase para redondearla (es la que está incluida en el bootstrap de twitter):

Código CSS:

.img-circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
 

y me queda algo así:



Luego le aplico una sombra que, aunque no viene mucho al caso lo hago con

Código CSS:

.img-shadow {
 box-shadow: rgba(0,0,0,.5) 0.25em -0.25em 0.5em 0.04em; 
}
 

Y por último aplico un padding para crear un marco blanco:

Código CSS:

.img-borde {
padding: 3%;
}
 

En Firefox esto se aplica perfectamente y se ve algo así:



Pero en Safari el 3% de padding lo aplica a la imagen sin redondear, con lo cual el resultado es algo como:



Admito sugerencias, soluciones... pero que no pasen por aplicar varias imagenes para simular la sombra ni photoshop, ni... en fin, que me gustaría hacerlo con css3 (que para eso lo publico en este foro )

El primero que encuentre la solución se puede apuntar el gallifante.

Muchas gracias de antemano a todos.