User-832373396 posted
Hi,
I suggest you could refer to my demo below;
Key points:
1:box-shadow:0 3px 3px rgba(21,62,78,0.8); /*display shadow*/
2:border-radius:50%; /* show that the circular */
3::before{} /* By pseudo-element*/
Here is my screenshot:

StyleSheet1.css:
body {
/*background: url('http://www.w3cplus.com/demo/css3/minimal-login-ui/bg.jpg') no-repeat center fixed;*/
background-size: 100% 100%; /*if you want a background image*/
}
.content {
width: 600px;
height: 420px;
padding-top:73px;
margin: 50px auto;
background-image:-*-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));
box-shadow:0 3px 3px rgba(21,62,78,0.8); /*display shadow*/
}
.img-form {
width:400px;
height:177px;
margin:70px auto 0;
/*padding-top:73px;*/
; /*This is do for ':before' */
/*background: url("http://www.w3cplus.com/demo/css3/minimal-login-ui/profilepicture.jpg") no-repeat ;*/
/*box-shadow:0 3px 3px rgba(21,62,78,0.8);*/
}
.img-form:before {
content:"";
;/*Absolute positioning relative to ‘img-form’*/
top:-50px;
left:-20px;
width:102px;
height:102px;
border-radius:50%;
padding:2px;
border:1px solid rgb(216,216,219);
background:#fff url("http://www.w3cplus.com/demo/css3/minimal-login-ui/profilepicture.jpg") no-repeat 2px 2px;
}
.img-form:after {
content:"word word word word word word"; /*some words will be display*/
; /*Absolute positioning relative to ‘img-form’*/
color:rgb(153,153,153);
font-weight:bold;
bottom:-60px;
background-color:rgb(255,255,255);
/*width:400px;*/
width:300px;
height:100px;
margin:0 50px;
line-height:100px;
text-align: center;
box-shadow:0 3px 3px rgba(21,62,78,0.8); /* display shadow */
}img {
width:100%;
height:200px;
}
Html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Demo</title>
<link href="~/Content/StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<section class="demo">
<div class="content">
<form action="" method="post" class="img-form">
<img src="http://www.w3cplus.com/demo/css3/minimal-login-ui/profilepicture.jpg" />
</form>
</div>
</section>
</body>
</html>
Hope it is useful to you.If you have any question and confusion about the problem. Please don't hesitate to let me know.
Best regards,
Angelina