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!
- How to make jsfiddle bootstrap ready
- How to place two div elements next to each other
- List of 32 CSS cursors web developers must know about
- How to create a circular Image using pure CSS Code
- How to set CSS background-Image Property
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- Only Chessboard using HTML and CSS Code Example
- Set Falling Show on Website for Christmas using Pure CSS Code
- Horizontally Center Align
- How to Center Align Image in Bootstrap
- align image at middle of div element
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- reCAPTCHA Implementation Tutorial
- Add scroll to div element in HTML Css
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- Force convert HTML text input to upper case - Html
- [Solution] Alpine Docker apt-get: not found - Docker
- [Solution] macOS could not be installed on your computer OSInstall.mpkg appears to be missing or damaged - MacOS
- 86 Gmail keyboard shortcuts that you may find Advantageous - Google
- How to Disable Mac Terminal Bell Sound - MacOS
- Save a file as CSV Format TextEdit on Mac - MacOS
- Install Gradle VS Code for Java Projects - Gradle
- How to flatten a nested list in Python - Python