Cutting off the nasty edge of a circular blurred image

Question

There's a few posts about this for cutting off the edges of a square image, however none for an image that takes the shape of a cirlce.

Unfortunately the solutions expressed here do not work, because it chops off the circle.

Here's a JSFiddle trying to use the solution above: http://jsfiddle.net/3hg7ry9k/

CSS:

.fix {
     margin: -5px -10px;
}

.avatar {
    width: 128px;
    -webkit-filter: blur(5px);
    border-radius: 50%;
}

Basically, I'm trying to have a blurred circle image with crisp borders.

Answer 1

You Should Set the blur effect to the img. and set the border-radius to the container:

http://jsfiddle.net/t1e1s5hb/

HTML

<div class="avatar">
    <img class="fix" src="http://pickaface.net/avatar/Opi51c7dccf270e0.png" width="150">
</div>

CSS

.fix {
    margin: -5px -10px;
    -webkit-filter: blur(5px);
}

.avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
}