Pixelated edge around a CSS Circle with overflow: hidden;

Using Background Gradient

This requires no extra html markup. I have tested it on Firefox (and it is confirmed to work on Safari and Chrome as well, see comments). It makes the background of the eye the purple color some distance in from the edge, and then the yellow the rest of that using a radial background gradient for the color. This seems to avoid the “blending” (and yellowing) seen along the edge where it is attempting to “hide” based on the border-radius and overflow: hidden combination.

Here is the original solution/fiddle example with 1px of purple. With the drop shadow removed, however, you can still slightly detect a discoloration. So I updated the answer below to a 2px wide purple border, which this winking cat with drop shadow removed shows that no discoloration is occurring.

Here is the (updated to 2px) code:

.eye {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: #fad73f; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #fad73f 0, #fad73f 48px, #821067 49px); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,#fad73f), color(48px,#fad73f), color-stop(49px,#821067)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px); /* IE10+ */
    background: radial-gradient(ellipse at center,  #fad73f 0,#fad73f 48px,#821067 49px); /* W3C */

    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;
}