如何使用CSS畫一個圓圈？圓圈中間寫字？

 看下效果 ：

.circle_green {
      /*background: burlywood;*/
      border: 2px solid #0fd41e;
      color: #000;
      width: 56px;
      height: 56px;
      border-radius: 50%;

      font: 14px Arial, sans-serif;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
    }
.circle_red {
      /*background: burlywood;*/
      border: 2px solid #dd0000;
      color: #000;
      width: 56px;
      height: 56px;
      border-radius: 50%;

      font: 14px Arial, sans-serif;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
    }
    .circle_yellow {
      /*background: burlywood;*/
      border: 2px solid orange;
      color: #000;
      width: 56px;
      height: 56px;
      border-radius: 50%;

      font: 14px Arial, sans-serif;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: flex;
    }      

<p class="circle_green"><span id="all_by2" style="font-weight: bold; color: #449d44; font-size: 20px;">16</span></p>      

<p class="circle_red"><span id="all_by2" style="font-weight: bold; color: #449d44; font-size: 20px;">16</span></p>