I found a way to solve the ugly circle when using rounded(). Now, by using smooth() as well, it will generate a avatar at 5x size (without text) and resize back after the circle has been created. Example below:
Before:
After:
As you can see, the text is unchanged but the circle is far smoother. Use this and supply a avatar double the size of the img tag, and you will get some crisp avatars. 👍
Double size of img tag:
Smooth + double size of img tag: