DEV Community


Posted on • Originally published at

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

Tutorial on how to create beautifully shaped avatar.



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

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


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('');
    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)