Build a rectangle frame with a transparent circle using CSS only - html

Question

I need to implement a design to my webpage butI am kind of newbie with CSS.
What I am trying is to add a frame above the user picture. For example, for any size of image, I want that a given profile image like:
... I want to add a rectangle with a transparent circle inside like:
... so the final result would be like:
I am currently adding this frame as an image an resizing the user's image but it decreases resolution.
I really need the frame height size to be equal the image height size and put a frame and circle according to the user image.
Any Ideas?

Answer 1

Here try this DEMO. To check transparency, try changing body color.
<div class="outerCont">
<div class="innerCont centerAlign">
<img src="http://i.stack.imgur.com/FjDS6.png"/>
</div>
</div>
.outerCont{
height:300px;
width:300px;
position:relative;
overflow:hidden;
}
.innerCont{
background-color:transparent;
border:150px solid rgb(186, 230, 255);
border-radius:50%;
height:200px;
width:200px;
overflow:hidden;
}
.innerCont img{
position:absolute;
height:80%;
bottom:0;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
.centerAlign{
position:absolute;
left:50%;
top:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}

Answer 2

Well, there are 2 ways:
1)
HTML:
<div class="profile_pic_cont">
<img src="img/profile_pic.jpg" class="profile_pic" />
</div>
CSS:
.profile_pic_cont {
width: 100px;
height: 100px;
background-color: #d2e8f7; /* light blue */
padding: 5px;
}
.profile_pic {
border-radius: 9999px;
}
or
2)
HTML:
<div class="profile_pic_cont">
<img src="img/profile_pic_frame.png" />
</div>
CSS:
.profile_pic_cont {
width: 100px;
height: 100px;
background: #fff url('./img/profile_pic.jpg') no-repeat top left;
}

Answer 3

HERE IS THE JSFIDDLE
.circle {
background-color:#fff;
border-radius: 50%;
width: 250px;
height: 250px;
text-align:center;
background-image:url('http://i.imgur.com/NGz1YlF.png');
background-repeat:no-repeat;
background-size:65%;
background-position:center bottom;
}

Answer 4

You should draw the square, then the circle on top of it and finally put the image, this will produce the result you want.
Check there for how to trace a circle in CSS.