Pixelated Edge Around a CSS Circle with Overflow: Hidden;

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

How to make CSS3 rounded corners hide overflow in Chrome/Opera

Nevermind everyone, I managed to solve the problem by adding an additional div between the wrapper and box.

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

HTML

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

Thanks everyone who helped!

→ http://jsfiddle.net/5fwjp/

Issues with overflow:hidden in Chrome on a 'retina' display

My example was too over-simplified so the problem didn't occur standalone.

It turns out that, via a SASS mixin in my full application, I had the following applied to the panel containing the sprite (edit question to include it)

-webkit-transform: translate3d(0px,0px,0px);

This was there to improve CSS performance with hardware acceleration where available (mainly iOS).

Removing this improves the situation slightly, so it seems less likely to 'clip' the shape when resizing the window.

However removing overflow: hidden from the :after element seems to have solved it entirely.

It is worth noting that this 'clipping' side-effect occurs even with a pure CSS circle, it's not related to background-images (thanks @Rohit).

This seems to be a rendering bug rather than something I'm doing wrong.

Expanding circles with css3 animation pixelating on larger viewports

The pixelated edges are caused by the transform: scale.
It stretches the circles, which are 10 by 10 pixels by default, to 100 times it's size.

You'll want to look into making the default size as big as possible and then scale it down at the start.

Link to the updated fiddle:

https://jsfiddle.net/Lreux3rx/2

How to fix border gap with border-radius?

Add a background with the same color:

<div style="background:red"><img src="https://pbs.twimg.com/profile_images/949374088249671680/MuxDEZpD_400x400.jpg" style="border-radius:400px;border:4px solid darkblue; background: darkblue;"></div>

Defined Edges With CSS3 Filter Blur

You could put it in a <div> with overflow: hidden; and set the <img> to margin: -5px -10px -10px -5px;.

Demo:

Output

Sample Image

CSS

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}

HTML

<div><img src="http://placekitten.com/300" /></div>

Circle with border looks not circular, jagged and not smooth, why?

Because you think you are using 50% but you aren't, you have used border-radius: 50px; but that's wrong, you are using border of 4px which you forgot to add to the box sizing of your element (If you are aware of how box model of CSS really works).

So you should be using border-radius: 54px; instead cuz your total element's height and width sums up to 108px counting border on both the sides.

Demo

It is better if you use 50% in such cases

Demo

#circle {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
    border:4px solid blue;
}

If you want to stick with the 50px measurement, than you can alter the box model rendering by using box-sizing: border-box;

box-sizing: border-box;

Demo (Altered Box Model)

Pixelated Edge Around a CSS Circle with Overflow: Hidden;