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/
Facing issues? Have Questions? Post them here! I am happy to answer!
Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.
Follow him on: X
You can also reach out to him via e-mail: rakesh@code2care.org
- How to create a circular Image using pure CSS Code
- Horizontally Center Align tag in HTML using CSS
- Add scroll to div element in HTML Css
- Change CSS Background Opacity with Examples
- How to make text bold using CSS
- How to place two div elements next to each other
- Vertically Center Text in a DIV Element
- align image at middle of div element
- Tailwind CSS Hello World Example
- How to make div or text in html unselectable using CSS
- Only Chessboard using HTML and CSS Code Example
- Simple CSS Grid Example
- How to set CSS background-Image Property
- CSS Background Opacity with Examples
- reCAPTCHA Implementation Tutorial
- List of 32 CSS cursors web developers must know about
- How to Vertically Center Align Text in a Div using CSS Code Example
- 10 Must Know CSS Border Styles with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- CSS: Apply opacity only for div background and not text
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to make jsfiddle bootstrap ready
- Elegant CSS Box Shadows Ideas
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- How to Center Align Image in Bootstrap
More Posts:- Fix - java.lang.ClassCastException - Java
- Ubuntu: How to search for a package to install using apt in Terminal - Ubuntu
- No Android device found : Android File Transfer App Mac OS X - Android
- How to press shortcut CTRL + ALT + DEL on Windows Remote Desktop - HowTos
- Run IntelliJ Java main method without Gradle build - Gradle
- [Android Studio] How to locate code for activity_main.xml - Android-Studio
- How to add Quotes at the Start and End of Each Line in Notepad++ - NotepadPlusPlus
- How to list all tables using Java JDBC - Java