How to create a circular Image using pure CSS Code

Most of the avatars (profile pictures) on social media sites or any other website these days are circular. They look really good and have kind of become the de facto.

Let's take a look at how to create such images with pure CSS code.

Step 1: Choose your image

First lets pic an image, its better to have it in a square shape with the subject in the center.

Step 2: Create an <img> tag with the image

In your HTML code, create an image tag with the picture you selected.

<img src="/images/dog-profile-image.jpg" alt="Circular Profile Picture"></img>

Step 3: Write CSS class to make the image circular

.circular_profile_pic {
  width:200px;
  height:200px;
  display:block;
  border-radius:400px;
  border:15px solid #111111DD;

}

Note: You may adjust the border radius depending on the width and height of your image.

Step 4: Attribute the CSS class to your image tag.

<img class="circular_profile_pic" src="/images/dog-profile-image.jpg" alt="Circular Profile Picture"></img>

Complete Code

<div>
<style>
.circular_profile_pic {
  width:200px;
  height:200px;
  display:block;
  border-radius:400px;
  border:15px solid #111111DD;

}
</style>
<img class="circular_profile_pic" src="/c2c-tmp-imgs/dog-profile-image.jpg" alt="Circular Profile Picture"></img>
</div>

Jsfiddle Link: https://jsfiddle.net/code2care/3skau1pg/7/

Have Questions? Post them here!