title: Pixelated edge around a CSS Circle with overflow: hidden;
body: <p>Here is the <a href="http://jsfiddle.net/Josh_Powell/DJQ68/37/" rel="noreferrer">JSFIDDLE</a> of my cat/animation <Strong>without any</strong> <code>drop-shadows</code> to show the problem as clearly as I can. To my understanding this is being caused by the <code>border-radius</code> and possibly due to <code>overflow: hidden;</code>.</p>
  
  <hr>
  
  <p>The owl is not what this question is about , just an example of a similar situation I was in. The jsfiddle/cat is what this question is about, sorry for the mix up!</p>
  
  <p>Here is a <a href="http://jsfiddle.net/Josh_Powell/DJQ68/19/" rel="noreferrer">JSFIDDLE</a> for my cat with an inset box shadow using the <code>blur</code> property of a <code>box-shadow</code> and the pixelated edge is still the same around the eye.</p>
  
  <p>The answer on here does solve what I saw with my Owl image but not for what this answer is about.</p>
  
  <p>Here is the cat with an <code>inset box-shadow</code> while using the third value, <code>blur</code>.</p>
  
  <p><img src="https://i.stack.imgur.com/79i73.jpg" alt="inset box-shadow"></p>
  
  <hr>
  
  <p>I have tested this fiddle in Safari, Chrome, and Firefox and they all seem to display it the same.</p>
  
  <p><em>I have two eyes on the <a href="http://jsfiddle.net/DJQ68/18/" rel="noreferrer">Cheshire Cat</a> that I started making yesterday out of CSS. Everything renders very well and I also have made an <a href="http://jpowell43.mydevryportfolio.com/Project/" rel="noreferrer">Owl</a>(<strong>I first thought this was a similar situation but it is NOT</strong>) out of CSS that has a very minor yet similar problem on the eyes being pixelated around the edges.</em></p>
  
  <p>I have also tried to give the eyes a border of the purple color but the pixelated edge stayed the same on the edge of the border.</p>
  
  <p>On my new CSS creation the outside edge of the eyes is very pixelated and seem to be the color(yellow) of the parent circle.</p>
  
  <p>Here is the CSS for the eyes.</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Below is the jsfiddle I used to make this animation/creature.</p>
  
  <p><a href="http://jsfiddle.net/DJQ68/18/" rel="noreferrer">JSFIDDLE</a></p>
  
  <p><strong>I believe the problem is being caused by...</strong></p>
  
  <p>I think the root of the problem is being caused by the <code>.lidT</code> and <code>.lidB</code> classes I have contained inside of my <code>.eye</code>.</p>
  
  <p>It seems to cut the eyelids off by <code>1px</code> around the edge of it. Try making the eyes blink in the fiddle to see what I mean.</p>
  
  <p>Images also are not out of the question but I would like to stick with making a CSS image first for a learning reason.</p>
  
  <p><strong>List of styles that do not help</strong></p>
  
  <ol>
  <li><p><code>box-shadow</code></p></li>
  <li><p><code>border</code></p></li>
  <li><p><code>box-sizing</code></p></li>
  <li><p>Not a Firefox only bug</p></li>
  </ol>
  
  <p><strong>End List</strong></p>
  
  <p><strong>Updates</strong></p>
  
  <p>A work around is adding an eye socket or outer main tag to the eye. This hides the pixelation but is only a workaround to the problem.</p>
  
  <p>See apaul34208 answer for more details</p>
  
  <p>Here is the problem with apaul34208 answer,</p>
  
  <p><img src="https://i.stack.imgur.com/SKJki.png" alt="apaul&#39;s answer"></p>
  
  <p>See how the left and top side of the eye is flat, <strong>I would love to know if my question is a browser problem or css</strong>.</p>
  
  <p><strong>End Updates</strong></p>
  
  <p><strong>Best option as of 11/13/2013</strong></p>
  
  <p>Using a background gradient on the <code>.eye</code> seems to be the cleanest solution so far. Refer to ScottS answer.</p>
  
  <p>This also does work in Firefox, Chrome, Safari, and IE. (A little ruff in IE bu much better then before)</p>
  
  <p>Any and all help is greatly appreciated!</p>