How to make the rounded blured border for rounded profile picture in CSS

Question

I need a css code for border blur inside of the image. Please see https://i.stack.imgur.com/w6KNa.jpg

.effet {
 width: 400px;
 height: 125px;
 margin: 0 auto 50px auto;
}
.profile-box{
    width: 150px;
    height: 150px;
    margin-left: 40px;
    border: none !important;
    padding: 19.5px 10px;
    display: block;
}
.min_cir{
border-radius: 50%;
}
.filtre--r {
    -webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 30%, black 80%);
    -webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 110%);
    -webkit-filter: blur(5px);
    mask: url('#mask-radial');
    filter: url('#filtre1');
 margin-top: -307px;
}

<div class="profile-box">
 <div class="media">
  <a class="pull-left" href="">
   <!--<img class="img-circle" src="">-->
   <div class="effet">
   <img class="min_cir" src="http://i.imgur.com/oH1698V.jpg">
   <img class="filtre filtre--r min_cir" src="http://i.imgur.com/oH1698V.jpg">
   </div>
  </a>
 </div>
</div>

It is worked but not like corrected blured border.. Its working with gradient style.. Can anyone help me to make the "Fixed border and rounded with blur" image in CSS Thanks.

score 3 · Answer 1 · edited Feb 03 '16 at 11:14

You might want this. Just make the images position absolute and give transform: scale(1.1); to the blurred image.

.effet {
 width: 400px;
 height: 125px;
 margin: 0 auto 50px auto;
}
.profile-box{
    width: 150px;
    height: 150px;
    margin-left: 40px;
    border: none !important;
    padding: 19.5px 10px;
    display: block;
}
.min_cir{
border-radius: 50%;
  border-radius: 50%;
    position: absolute;
    top: 0;
}
.filtre--r {
    -webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 30%, black 80%);
    -webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 110%);
    -webkit-filter: blur(5px);
    mask: url('#mask-radial');
    filter: url('#filtre1');
 transform: scale(1.1);
    position: absolute;
    top: 0;
}

<div class="profile-box">
 <div class="media">
  <a class="pull-left" href="">
   <!--<img class="img-circle" src="">-->
   <div class="effet">
   <img class="min_cir" src="http://i.imgur.com/oH1698V.jpg">
   <img class="filtre filtre--r min_cir" src="http://i.imgur.com/oH1698V.jpg">
   </div>
  </a>
 </div>
</div>

Highly agree with this answer, but I would also suggest swapping the images because right now the blurred one appears on top. — Max Novich, Feb 02 '16 at 14:30

score 1 · Answer 2 · edited May 23 '17 at 12:23

It looks like you're almost there.
I would use two images for this solution;

Layer A | z-index:1 A div with the background-image being the profile picture. I would then blur the image with css3 blur.

Layer B | z-index:2 Will be the profile pic on top of this one

Check out this stackoverflow question for some guidance. Your situation is quite similar. Good luck! How to apply a CSS 3 blur filter to a background image

How to make the rounded blured border for rounded profile picture in CSS

2 Answers2