El último código que pusiste es el que no se ve? O se ve pero se desarma al meterlo en tu página?
En Firefox lo veo bien, pero IE va a ser un problema. Creo que el efecto sólo se ve hasta la versión 8, y no sé si con prefijo.
Código:
#muestra {
border-radius: 150px;
-moz-border-radius: 150px;
-o-border-radius: 150px;
-ms-border-radius: 150px;
-khtml-border-radius: 150px;
-webkit-border-radius: 150px;
height: 285px;
width: 285px;
position: absolute;
top: 0;
left: 20px;
border: 6px solid #006600;
}
Para versiones de navegador que no acepten esta sintaxis ... habrá que inventar un hack. O volver a tu idea de la máscara *.gif.
Mira, si realmente no te funciona vamos a hacer esto último. Insisto, al menos para subir tu página. Después se ve cómo vas creando otra en paralelo que sea más fácil de manejar, más limpia para ver.
Un detalle : esos 150px deberían ser la mitad del lado más chico de la imagen. Si son mayor, el navegador los corrige, pero siempre trata de que sea lo más cercano que puedas. Por prolijidad, nada más, no es que sea indispensable.
Y el foro ya me mandó un aviso de que casi me explota la bandeja de entrada de los MP. Calma, que por esto no se murió nadie.
Beso y espero a que hagas la prueba.