Borde pixelado alrededor de un círculo CSS con desbordamiento: oculto;

Aquí está el JSFIDDLE de mi gato / animación sin ninguna drop-shadows para mostrar el problema tan claramente como pueda. A mi entender esto está siendo causado por el border-radius y posiblemente debido a overflow: hidden;.

El búho no es de lo que trata esta pregunta , solo un ejemplo de una situación similar en la que me encontraba. El jsfiddle / cat es de lo que trata esta pregunta, ¡perdón por la confusión!

Aquí hay un JSFIDDLE para mi gato con una sombra de recuadro usando el blur propiedad de un box-shadow y el borde pixelado sigue siendo el mismo alrededor del ojo.

La respuesta aquí resuelve lo que vi con mi imagen de Búho, pero no para qué se trata esta respuesta.

Aquí está el gato con un inset box-shadow mientras usa el tercer valor, blur.

He probado este violín en Safari, Chrome y Firefox y todos parecen mostrarlo de la misma manera.

Tengo dos ojos en el Gato de Cheshire que empecé a hacer ayer salió de CSS. Todo rinde muy bien y también he hecho un Búho(Primero pensé que esta era una situación similar, pero NO es) fuera de CSS que tiene un problema muy menor pero similar en los ojos que se pixelan alrededor de los bordes.

También he tratado de dar a los ojos un borde del color púrpura, pero el borde pixelado se mantuvo igual en el borde del borde.

En mi nueva creación CSS el borde exterior de los ojos está muy pixelado y parece ser el color(amarillo) del círculo padre.

Aquí está el CSS para los ojos.

.eye {
  border-radius: 50%;
  height: 100px;
  width: 100px;
  background: #FAD73F;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: inline-block;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

.pup {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background: #2b2b2b;
  display: block;
  position: absolute;
  top: 40px;
  left: 40px;
}

.lidT {
  display: block;
  width: 100px;
  height: 100px;
  background: #821067;
  position: absolute;
  top: -80px;
  z-index: 20;
}

.lidB {
  display: block;
  width: 100px;
  height: 100px;
  background: #821067;
  position: absolute;
  bottom: -80px;
  z-index: 20;
}

A continuación se muestra el jsfiddle que utilicé para hacer esta animación/criatura.

JSFIDDLE

Creo que el problema está siendo causado por...

Creo que la raíz del problema está siendo causada por las clases .lidT y .lidB que he contenido dentro de mi .eye.

Parece cortar los párpados por 1px alrededor del borde de la misma. Trate de hacer los ojos parpadean en el violín para ver lo que quiero decir.

Las imágenes tampoco están fuera de discusión, pero me gustaría seguir haciendo una imagen CSS primero por una razón de aprendizaje.

Lista de estilos que no ayudan

1. box-shadow

2. border

3. box-sizing

4. No es un bug solo para Firefox

Lista final

Actualizaciones

A work around is adding an cuenca del ojo o etiqueta principal externa al ojo. Esto oculta la pixelación, pero es solo una solución al problema.

Ver la respuesta de apaul34208 para más detalles

Aquí está el problema con la respuesta apaul34208,

Vea cómo el lado izquierdo y superior del ojo es plano, Me encantaría saber si mi pregunta es un problema de navegador o css.

End Updates

Mejor opción a partir del 11/13/2013

Utilizando una el gradiente de fondo en el .eye parece ser la solución más limpia hasta ahora. Refiérase a la respuesta de ScottS.

Esto también funciona en Firefox, Chrome, Safari e IE. (Un poco ruff en IE bu mucho mejor que antes)

Cualquier y toda ayuda es muy apreciada!