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!
More Posts related to CSS,
- 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
More Posts:
- [fix] Loading class com.mysql.jdbc.Driver is deprecated - MySQL
- How to enable Do Not Disturb mode for Notification Center in Mac OS X 10.10 Yosemite - Mac-OS-X
- Steps to Delete or Deactivate Instagram Account - HowTos
- Notepad++ do not show CRLF characters - NotepadPlusPlus
- YAML Parser using Java Jackson Library Example - Java
- [Fix] Spring Tool Suite STS Code Autocomplete not working with Eclipse - Eclipse
- Test internet speed using macOS Terminal command - MacOS
- SharePoint error 2130575251 - The security validation for this page is invalid and might be corrupted - SharePoint