Back
Learn how to build an elegant profile avatar with a customizable border and online status indicator using pure CSS.
<div class="avatar-container">
<div class="avatar">
<img src="..." alt="Profile photo" class="avatar-img">
<div class="status-indicator online"></div>
</div>
</div>
The image source URL should point to the user's profile picture. We've used a sample image from Unsplash for demonstration purposes. The status indicator has two classes: one for its base styling and another ("online") to specify the current status.
.avatar-container {
display: flex;
justify-content: center;
align-items: center;
}
Next, we style the avatar wrapper. We use CSS variables to make the avatar highly customizable, defining the size, border width, and border color. The position: relative is important for correctly positioning the status indicator.
.avatar {
position: relative;
--avatar-size: 80px;
--border-width: 3px;
--border-color: #FFFFFF;
--status-size: 14px;
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 50%;
border: var(--border-width) solid var(--border-color);
background-color: var(--border-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
The background-color matching the border color ensures that if the image is not perfectly square or has transparent areas, we still see a consistent circle. The box-shadow adds subtle depth to make the avatar stand out on the page.
For the image itself, we use object-fit: cover to ensure it fills the circular container properly, regardless of the original image dimensions:
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
Finally, we style the status indicator as a small colored circle positioned at the bottom-right of the avatar:
.status-indicator {
position: absolute;
bottom: 0;
right: 0;
width: var(--status-size);
height: var(--status-size);
border-radius: 50%;
border: 2px solid var(--border-color);
background-color: #9CA3AF;
}
.status-indicator.online {
background-color: #10B981;
}
.status-indicator.busy {
background-color: #EF4444;
}
.status-indicator.away {
background-color: #F59E0B;
}
We've included several status options with appropriate colors:
- The default gray (#9CA3AF) typically indicates offline status
- Green (#10B981) for online
- Red (#EF4444) for busy/do not disturb
- Amber (#F59E0B) for away/idle
The 2px white border around the status indicator creates a clean separation from the avatar and background.
This bordered profile avatar offers several advantages for user interfaces:
- Professional appearance: The clean border and subtle shadow create a polished, professional look.
- Status communication: Users can quickly see the availability status of others in collaborative applications.
- Consistent display: The design ensures consistent presentation of profile images regardless of the source image dimensions or aspect ratio.
- Customizable design: The CSS variables make it easy to adjust sizes, colors, and proportions to match your design system.
- Cross-browser compatible: The approach uses standard CSS properties that work well across modern browsers.
This avatar design is particularly well-suited for social networks, team collaboration tools, messaging applications, and any interface where users interact with each other and need to know status information at a glance.<div class="avatar-container">
<div class="avatar">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80" alt="Profile photo" class="avatar-img">
<div class="status-indicator online"></div>
</div>
</div>
<style>
.avatar-container {
display: flex;
justify-content: center;
align-items: center;
}
.avatar {
position: relative;
--avatar-size: 80px;
--border-width: 3px;
--border-color: #FFFFFF;
--status-size: 14px;
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 50%;
border: var(--border-width) solid var(--border-color);
background-color: var(--border-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.status-indicator {
position: absolute;
bottom: 0;
right: 0;
width: var(--status-size);
height: var(--status-size);
border-radius: 50%;
border: 2px solid var(--border-color);
background-color: #9CA3AF;
}
.status-indicator.online {
background-color: #10B981;
}
.status-indicator.busy {
background-color: #EF4444;
}
.status-indicator.away {
background-color: #F59E0B;
}
</style>
Thank you for reading this article.
Comments