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 100×100 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. ❤️