Beautiful goldish avatar using only one element - A step-by-step tutorial

Tutorial on how to create a beautiful golden avatar using only one element.

HTML

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

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

CSS
For CSS, first we'll style the "avatar" class.

We'll set width and height of 100x100 pixels with border set to 10px goldish solid.

I'll just set a background image that I found on google and set the size to cover.

To form a circle, simply set border-radius property to 50%.
Lastly, we'll set position to relative.

.avatar {
    width: 100px;
    height: 100px;
    border: 10px solid #d0ab35;
    background-image: url('https://dl.memuplay.com/new_market/img/com.vicman.newprofilepic.icon.2022-06-07-21-33-07.png');
    background-size: cover;
    border-radius: 50%;
    position: relative;
}

Now we'll style the before pseudo element.

We'll set content and position to absolute with top, bottom, left and right set to -16 pixels.

This means that this element will be by 16 pixels larger on all sides that the div "avatar" element.

We'll set border radius to 50% to form a circle.

Now we'll set background image to linear gradient with some beautiful golden colors.

Using clip-path property, we'll create cut two squares, one on top and one on the right side.

By setting z-index property to -1, this element will go beneath the "avatar" div element, and it will look like a 16 pixels wide border.

.avatar:before {
    content: "";
    position: absolute;
    top: -16px;
    bottom: -16px;
    left: -16px;
    right: -16px;
    border-radius: 50%;
    background-image: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    clip-path: polygon(54% 0, 53% 5%, 59% 6%, 61% 0, 100% 0, 100% 60%, 94% 58%, 91% 67%, 100% 70%, 100% 100%, 0 100%, 0 0);
    z-index: -1;
}

Now we'll style the after pseudo element.
We'll set content and position to absolute with top, bottom, left and right set to -11 pixels.
This means that this element will be larger that 11 pixels on all sides that "avatar" div element, and 5 pixels smaller that the before pseudo element.
We'll just set solid white border to 4 pixels with radius of 50% to form a circle.

.avatar:after {
    content: "";
    position: absolute;
    top: -11px;
    bottom: -11px;
    left: -11px;
    right: -11px;
    border: 4px solid #fff;
    border-radius: 50%;
}

And that's it.

You can find video tutorial and full code here.

Thanks for reading. ❤️