如何使用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>