← All elements
<div class="as2"><div class="ring"><i></i></div><span class="dot"></span></div>About this border
An avatar framed by a gradient story ring with an online dot, common in chat and social interfaces.
How it works
A conic gradient circle forms the story ring, padded by four pixels to expose it around a white-bordered avatar. A green dot with a white border marks the online status.
Ways to customise it
- Change the ring colours.
- Move the dot to another corner.
- Use an image for the avatar.
Good to know
Status is shown by colour only here, so add text or a label such as Online in a real interface.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.