1 Answers
The image has a thick border around it with a border radius to make it a circle or the element is a square with a border radius to make it a circle with the profile image as the background. It is then placed with positioning to give that effect.
#banner {
width: 100%;
background-color: gray;
height: 400px;
}
#profile img {
border-radius: 100%;
border: 5px solid white;
margin-top: -70px;
margin-left: 40px
}<div id="banner"></div>
<div id="profile">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlHBoELHG9IPFDyVp_5_lRfL-9zTYR-YG1nEC8N9c&s" />
</div>Related