title: CSS/JS for Circular cropping of an image
body: <p>my designer passed me a look that I would love to be able to replicate, but i am not very sure how to do so. </p>
  
  <ul>
  <li>the first part is the circular cropping of the avatar (it is a square upload)</li>
  <li>the second part is the speech bubble </li>
  </ul>
  
  <p>I am open to doing the first part in the backend, but would prefer having a CSS/JS solution. </p>
  
  <p><img src="https://i.stack.imgur.com/I8Kh1.png" alt="enter image description here"></p>