Beautifully shaped avatar - CSS only - A step-by-step tutorial

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.

You can find video tutorial and full code here.

Thanks for reading. ❤️