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

Well, there are 2 ways: 1) HTML:

CSS:

.profile_pic_cont {
width: 100px;
height: 100px;
background-color: #d2e8f7; /* light blue */
padding: 5px;
}
.profile_pic {
border-radius: 9999px;
}

or 2) HTML:

CSS:

.profile_pic_cont {
width: 100px;
height: 100px;
background: #fff url('./img/profile_pic.jpg') no-repeat top left;

}