sample.html

<div style="color: rgba(0, 0, 0, 0.870588); background-color: rgb(255, 255, 255); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px; border-radius: 50%; display: inline-block; position: absolute; bottom: -15px; right: 5px; max-width: none;">
  <button tabindex="0" type="button" style="border: 10px;box-sizing: border-box;display: inline-block;font-family: Roboto, sans-serif;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);cursor: pointer;text-decoration: none;margin: 0px;padding: 0px;outline: none;font-size: inherit;font-weight: inherit;transform: translate(0px, 0px);vertical-align: bottom;background-color: rgb(255, 64, 129);transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;position: relative;height: 40px;width: 40px;overflow: hidden;border-radius: 50%;text-align: center;">
    <div>
      <div style="transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; top: 0px;"> <!-- this div is what needs a 50% border-radius -->
        <svg viewBox="0 0 24 24" style="display: inline-block; color: rgb(255, 255, 255); fill: rgb(255, 255, 255); height: 40px; width: 24px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; line-height: 40px; -webkit-user-select: none;">
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z">
          </path>
        </svg>
      </div>
    </div>
  </button>
</div>