How to Create Avatar Images with CSS

Avatar Images

How To, for Front End and Web Applications

By: Chrysanthus Date Published: 27 May 2025

This tutorial explains How to Create Avatar Images with CSS. An avatar is an image, typically a passport sized photograph, that identifies a user, in social media.

At the end of this tutorial is the complete code. The reader should save the file with any name, but with the extension, .html. Then open the file in a browser to see (and appreciate rounded images for avatars). The images are in the https://broad-network.com/ website. So the reader should be hooked onto the Internet, in order to have them downloaded to his/her home computer webpage. The reader is advised to do that before continuing to read this tutorial.

The Webpage Skeleton Code

The webpage skeleton code to which more useful code will be added is:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Avatar Images</title>
        <link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Description of the Web Page.">
        
        <style>

        </style>

        <script type="text/javascript">
        </script>
    </head>
    <body>

    </body>
    </html>

Any modern professional webpage should have at least the first four tags in the HTML head element above. The HTML style element in the head element is the style-sheet. It is short, for this project. It is the main coding for each image. The JavaScript element will be left empty. The body element will have the image tags.

The HTML Body Element Content

The content of the HTML body element is:

        <h2>Avatar Images</h2>

        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar.png" alt="Avatar" class="avatar">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar2.png" alt="Avatar" class="avatar">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/avatar5.png" alt="Avatar" class="avatar">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/avatar6.png" alt="Avatar" class="avatar">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/avatar2.png" alt="Avatar" class="avatar">

Five image tags are there. At the source (website) of the images, the images are rectangles. Each image tag has the class-name, "avatar".

Strategy

It is fashionable today, to have an avatar as a small rounded image. So the techniques for rounded images are used.

It is CSS that obtains an inner round portion of the image. The center-top and center-bottom of the image are part of the image. The middle-right and middle-left of the image are also part of the image. Any other area towards the edges are not part (not shown) of the image.

Use a CSS rule to specify a border-radius of 50% for all the 4 corners of the image borders. With that, each circular arc will extend to the center or middle edges of the straight edges. Note that the border is not part of the image. All that produces a large central portion of the image.

Small sized here, means about 60px for the width of each image. The image at the source might actually be larger. When a small size is specified for an image, the browser reduces the height of the image appropriately.

The Stylesheet

The stylesheet is the content of the style element in the head element. It is just:

            img.avatar {
                width: 60px;
                height: 60px;
                border-radius: 50%;
            }

That is all ! There is just one CSS rule, which is the image CSS rule. If there are many images in a webpage, the set designated for the avatars, need to have a class-name, to differentiate between them and others. The class-name for these avatar images is "avatar", making the selector of the CSS rule, "img.avatar" . The width of each image is 60px. The height of each image is 60px, not waiting for the browser to choose an appropriate image.

Notice the 50% for all the 4 border-radii. The border thickness for the images in this case is zero.

The Complete Webpage Code

And there you have it: the complete webpage code is:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Avatar Images</title>
        <link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Description of the Web Page.">
        
        <style>
            img.avatar {
                width: 60px;
                height: 60px;
                border-radius: 50%;
            }
        </style>

        <script type="text/javascript">
        </script>
    </head>
    <body>
        <h2>Avatar Images</h2>

        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar.png" alt="Avatar" class="avatar">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar2.png" alt="Avatar" class="avatar">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/avatar5.png" alt="Avatar" class="avatar">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/avatar6.png" alt="Avatar" class="avatar">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/avatar2.png" alt="Avatar" class="avatar">
    </body>
    </html>

The reader should save the file with any name, but with the extension, .html. Then open the file in a browser to see (and appreciate rounded images for avatars). The images are in the https://broad-network.com/ website. So the reader should be hooked onto the Internet, in order to have them downloaded to his/her home computer webpage.

Chrys

Broad Network

Series Articles