Back

Beautifully shaped avatar - CSS only

A step-by-step tutorial on how to create beautifully shaped avatar.

HTML

For HTML, we need only one div element with class "avatar".


        <div class="avatar"></div>

CSS

For CSS, we'll style only the "avatar" class. We'll set width and height to 150x100 pixels and border to 5 pixels solid brown. I'll just set one random image that I found on google as a background image. Now I'll position the image in center, and cover whole area by setting background-position property to center and background-size to cover. To create this beautiful shape, I'll set border radius to 20% / 50%, which means that the 20% will be applied to horizontal radius and 50% to vertical radius.


        .avatar {
            width: 150px;
            height: 100px;
            border: 5px solid #AA771C;
            background-image: url('https://media.istockphoto.com/photos/beautiful-afro-girl-with-curly-hairstyle-picture-id1381221247?b=1&k=20&m=1381221247&s=170667a&w=0&h=4bt0RFmAffRSqrKa2N2vJAFbWgmbRg7x-0ziJaRtpxE=');
            background-size: cover;
            background-position: center;
            border-radius: 20% / 50%;
        }

And that's it.

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

<div class="avatar"></div>

<style>
.avatar {
  width: 150px;
  height: 100px;
  border: 5px solid #AA771C;
  background-image: url('https://media.istockphoto.com/photos/beautiful-afro-girl-with-curly-hairstyle-picture-id1381221247?b=1&k=20&m=1381221247&s=170667a&w=0&h=4bt0RFmAffRSqrKa2N2vJAFbWgmbRg7x-0ziJaRtpxE=');
  background-size: cover;
  background-position: center;
  border-radius: 20% / 50%;
}
</style>

Thank you for reading this article.

Beautifully shaped avatar - CSS only

HTML

CSS

Video tutorial

Whole code

More avatars

Similar

See also