How to create dotted border around a circular avatar using css and/or svg just like WhatsApp

[sagnik]

I want to replicate the exact UI that WhatsApp has for its status screen to show the count of statuses along with active and inactive contexts.

See the image for reference:

[Haradion]

For SVG, you could create a path for each segment of the circle. You'd have to find the start and end coordinates of each segment, and then you'd use elliptical arc path segments:

<path d="M START_X,START_Y A RADIUS RADIUS 0 0 0 END_X,END_Y" stroke="blue" />

The example above assumes that the arc is drawn clockwise and is smaller than 180 degrees; the second and third zeroes may have to be changed to ones if either of those assumptions changes for a given arc. MDN has further details on the A path command.