How to create: avatar images

Learn how to create avatar images using CSS.

Avatar Avatar Avatar Avatar Avatar

How to create avatar images

Step 1 - Add HTML:

<img src="avatar.png" alt="Avatar" class="avatar">

Step 2 - Add CSS:

to set a matching look that is quite nice height and widthand uses border-radius The property adds rounded corners to the image.50% The image will become circular:

.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

Try it yourself

Related pages

Tutorial:CSS image