Build a rectangle frame with a transparent circle using CSS only

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 imag

Answer 1

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;
}