DEV Community 👩‍💻👨‍💻

Designyff
Designyff

Posted on • Originally published at designyff.com

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

Tutorial on how to create beautifully shaped avatar.

Avatar

HTML

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

<div class="avatar"></div>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

And that's it.

You can find video tutorial and full code here.

Thanks for reading. ❤️

Top comments (0)

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.