Imágenes y CSS: Todo depende del navegador

Una imagen normal:

<img src="URL_IMAGEN"/>

Le redondeamos los bordes en Firefox, Chrome Opera e IE9:

<img style="border-radius:20px" src="URL_IMAGEN"/>

Le agregamos un borde:

<img style="border-radius: 20px;border: 5px solid #FFF;" src="URL_IMAGEN"/>

en Firefox y Chorme/Opera se verán diferentes:

Le agregamos un padding que es la separación entre el borde y la imagen en si misma:

<img style="border-radius: 20px;border: 5px solid #FFF;padding: 10px;" src="URL_IMAGEN"/>

Nuevamene, en Firefox y Chorme/Opera se verán diferentes:

Empezamos otra vez pero usando valores extremos

<img style="border-radius:100px;padding: 0 50px;" src="URL_IMAGEN"/>

la confusión de los navegadores aumenta ¿cómo era eso del respeto a los estándares?:

Me olvido de las dudas existenciales y sigo agregándole propiedades; esta vez, un color de fondo:

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;" src="URL_IMAGEN"/>

Y un poco de sombra exterior:

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 10px #DEF;" src="URL_IMAGEN"/>

Y una poco de sombra en el interior:

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 15px #000000 inset,0 0 10px #DEF;" src="URL_IMAGEN"/>

Y así podríamos seguir hasta el infinito.