Back

Creating a Professional Bordered Avatar with Status Indicator

Learn how to build an elegant profile avatar with a customizable border and online status indicator using pure CSS.

HTML

The HTML structure for our bordered profile avatar consists of an outer container for positioning, an avatar wrapper, an image element, and a status indicator div.


        <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.

CSS

First, we set up the container to center our avatar using flexbox:


        .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.

Whole code

<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.

Creating a Professional Bordered Avatar with Status Indicator

HTML

CSS

Whole code

Comments

More avatars

Similar

See also