Pixelated edge around a CSS Circle with overflow: hidden;

Question

Here is the JSFIDDLE of my cat/animation without any drop-shadows to show the problem as clearly as I can. To my understanding this is being caused by the border-radius and possibly due to overflow: hidden;.

---

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!

Here is a JSFIDDLE for my cat with an inset box shadow using the blur property of a box-shadow and the pixelated edge is still the same around the eye.

The answer on here does solve what I saw with my Owl image but not for what this answer is about.

Here is the cat with an inset box-shadow while using the third value, blur.

---

I have tested this fiddle in Safari, Chrome, and Firefox and they all seem to display it the same.

I have two eyes on the Cheshire Cat that I started making yesterday out of CSS. Everything renders very well and I also have made an Owl(I first thought this was a similar situation but it is NOT) out of CSS that has a very minor yet similar problem on the eyes being pixelated around the edges.

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.

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.

Here is the CSS for the eyes.

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

Below is the jsfiddle I used to make this animation/creature.

JSFIDDLE

I believe the problem is being caused by...

I think the root of the problem is being caused by the .lidT and .lidB classes I have contained inside of my .eye.

It seems to cut the eyelids off by 1px around the edge of it. Try making the eyes blink in the fiddle to see what I mean.

Images also are not out of the question but I would like to stick with making a CSS image first for a learning reason.

List of styles that do not help

1. box-shadow

2. border

3. box-sizing

4. Not a Firefox only bug

End List

Updates

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.

See apaul34208 answer for more details

Here is the problem with apaul34208 answer,

See how the left and top side of the eye is flat, I would love to know if my question is a browser problem or css.

End Updates

Best option as of 11/13/2013

Using a background gradient on the .eye seems to be the cleanest solution so far. Refer to ScottS answer.

This also does work in Firefox, Chrome, Safari, and IE. (A little ruff in IE bu much better then before)

Any and all help is greatly appreciated!

Answer 1

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

Answer 2

I believe the pixelation you're perceiving is a result of the box-shadow and not the border-radius or overflow.

The browser is trying to draw a 1px #2b2b2b line on the inside top of the circle. This line is bound to look jagged since it's on a curved path and required to appear as 1px in width.

Try setting the blur (or third value) for the box-shadow property.

Before and after:

Look a the difference between the two rounded <div/>s in this jsFiddle demo.

Answer 3

I think I may have a solution to your problem. Basically you just need to add eye sockets and hide the overflow on the eye sockets rather than the eyes.

Working Example

<span class="socket">
  <span class="eye">
    <span class="lidT"></span>
    <span class="pup"></span>
    <span class="lidB"></span>
   </span>
</span>

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

Answer 4

See this answer : stackoverflow.com/questions/6001281/firefox-border-color-border-radius-and-background-color-creates-ragged-edges-a#6001374

and this other already accepted answer : Border-radius bleeding

Try cliping your background :

.your-element {
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
}

After thinking, it is a normal behavior to 'blurr' the edge pixel. Browser is attempting to make something basically square to something round. Somehow, the 'in-between' pixel will be blurred, just like a photoshop selection.

A photoshoped demonstration of the blurry pixel.

Sadly, you will have to use a background-image, a real image-file.png.

For my part, i tried to reform your markups with an outter container to apply border-radius. User Mosher did it great, see his answer's jsfiddle.

Answer 5

working demo is here: jsFiddle

put the .eye content in the another container like this:

<span class="eye">
    <div id="eyeCover">
        <span class="lidT"></span>
        <span class="pup"></span>
        <span class="lidB"></span>
    </div>
</span>

remove overflow:hidden from .eye. new .eye style is here:

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

change .lidT and .lidB width to 105px then add this style for #eyeCover:

#eyeCover{
width: 102px;
height: 102px;
top:-1px;
left:-1px;
border-radius: 50%;
overflow: hidden;
position: relative;
}

working demo is here: jsFiddle