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!

Debbee

I can't help but say that's a rather cute owl :D – Divisible

@Divisible Why thank you! He was my first CSS3 figure/image I made and really loved how he came out. (That website also does not contain a single image! :]) – Debbee

It appears the same in Firefox, chrome, and safari that I have tested. – Debbee

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

Chitter

@JoshPowell: So did it test well in Safari and Chrome? – Chitter

In Safari I'll have to test at home but in Chrome it does work! – Debbee

@JoshPowell: I can still detect ever so slightly a color ring (nearly invisible) in Firefox (when I remove the box shadow and shut the lids it is possible to detect). Setting the stop values to 48px and 49px (instead of 49px and 50px) seemed to completely remove it, as this winking cat shows. I guess it depends on how much you want to shrink the eye and how important that slightly visible ring is. – Chitter

I pray every nights for IE8-WinXP to die so we can get pass over those 'bummer' situation forcing me to develop for 'oldies', using image files for textures. And, yes, i prefer your answer than mine. – Parliamentarian

@MilchePatern: In this case IE8-WinXP is a non-issue, as all the css3 animation and border radiusing and such being done in the "cat" make this whole question irrelevant to anyone wanting to accommodate IE8. And once IE8 is gone, there will be other old browsers not handling the latest and best css. So it always amounts to what one is going to design for and what browsers one does or does not care about leaving behind. – Chitter

I see what you mean ScottS, You can really see it on the bottom of the two eyes. I wonder if you increase the purple outside color of the gradient to 2px instead? – Debbee

@MilchePatern I don't care about the older browsers when I decided to do a css learning experiment. This is for my benefit and if you want to join in on the fun then update your browser or tuff luck. – Debbee

@JoshPowell: That's what changing the values from 49/50 to 48/49 does, it puts the transition after 48px, making the purple 2px wide. – Chitter

Okay that makes sense! This does seem like the best option that is current out there so far, cleanest in my eyes. I'll be posting a new question about a very odd pixel like tear in a background sometime today. You may find this one rather intriguing as well. :] – Debbee

@MilchePatern Should I use XP I'd use it on purpose, still wouldn't expect you to develop for IE8 (or 6 or 7 or 5.5; and by the way I use firefox)... thought I let you know, think about me when looking on the statistics. ;) – Karajan

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.

Sabinesabino

For the owl I made, this would indeed fix the problem! The cat that I am working on has an outside drop shadow and appeared like this before I added the drop shadow. I tried the drop shadow hoping it would look smoother. – Debbee

I do appreciate the time you gave to help me but I wanted to let you know and everyone else that this DOES NOT solve my question. It did help me on an example I gave of something I thought was a similar question but it is not. To my understanding this is being cause by the overflow on the parent and with the eye's eyelids inside of the eye. – Debbee

After trying, removing box-shadow from examples, I believe it's a 'border-radius' issue. – Parliamentarian

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

Incurable

This is a work around for this and good job pointing it out. I'm hoping we can find a straight forward solution to this or if it is a bug with CSS. +1 I did notice one thing that was a little off, on the right eye, left side you will see a flat edge on it. – Debbee

@JoshPowell Happy hunting, it was a fun one to play with. – Incurable

Thank you mate, hopefully someone has an radical idea! I am glad I could have offered a good challenge :] – Debbee

Answer 4

See this answer : https://mcmap.net/q/426834/-firefox-border-color-border-radius-and-background-color-creates-ragged-edges-and-white-space#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.

Parliamentarian

I didn't want to write it : i found no fix for this, except a background-image. It's normal to ADJUST pixels when rendering. Do the test with photoshop, you'll see. – Parliamentarian

Well that is a bummer but hopefully someone will find something amazing ;p – Debbee

https://mcmap.net/q/410517/-border-radius-bleeding or this one :: google.ca/… – Parliamentarian

+1 Good explanation, if you refer to ScottS's answer. This is the best option as of now because it doesn't require another DOM element like the other options. It is a rather clever solution but you believe this is purely due to the border-radius and not the overflow as well? – Debbee

Hmm but if I remove the .lidT/.lidB the border isn't pixelated at all but once I have those inside elements being cut by the overflow it causes this pixelation. Take a look at this fiddle, jsfiddle.net/Josh_Powell/DJQ68/38. – Debbee

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

Underlayer

I will try this out once I shower and get my comp on. There is one minor problem with your code, ids are unique and the cat has two eyes. :p – Debbee

Alright I just tested this and it does the same thing @apaul34208 answer does. Except this time it makes the right side of the eye flat. :p +1 for another decent workaround though! I wonder if there is something that can be done with the use of CSS-pseudo elements? I'm going to look into it. – Debbee