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.sstatic.net/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.

Answer 1

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>