3

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.

Community
  • 1
  • 1
Hobbyist
  • 15,888
  • 9
  • 46
  • 98

2 Answers2

3

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;
}
codedude
  • 6,244
  • 14
  • 63
  • 99
hmak.me
  • 3,770
  • 1
  • 20
  • 33
  • This cuts off parts of the image when any additional scaling CSS is added, could you please provide a solution? JSFiddle: http://jsfiddle.net/y0jnc9tb/3/ – Hobbyist Jul 07 '15 at 17:55
  • Here's a screen-shot showing borders of my issue, as-well. (In this event the image is being cut off at the bottom) http://gyazo.com/f02614945293cf44cdb708e554779cfb – Hobbyist Jul 07 '15 at 18:02
  • You Should Add The Scaling To The Container – hmak.me Jul 07 '15 at 18:02
  • 1
    The cut offs are because your margins. margin should be `-BlurRadius` from left and top. and your size must be bigger twice `Width + (2*BlurRadius)` – hmak.me Jul 07 '15 at 18:07
2

It's not very compatible at this point but it is the future:

img {
    -webkit-filter: blur(5px);
    -webkit-clip-path: circle(50% at center);
}
<img src="http://pickaface.net/avatar/Opi51c7dccf270e0.png"/>

(works on Chrome 43)

jcuenod
  • 55,835
  • 14
  • 65
  • 102
  • I'm sure this answer will help people in 2 or 3 years time when browsers catch up, unfortunately I have to support all agent browsers dating back to Android 2.3 and the iPhone3gs – Hobbyist Jul 07 '15 at 21:54
  • A simple modern solution with >97% [support](https://caniuse.com/css-clip-path) (prefixed) across browsers as of Sept 2021. – Nathan Sep 26 '21 at 20:51