CSS のみを使用して回覧番号バッジを作成するにはどうすればよいですか?

.numberCircle {
    border-radius: 50%;  /* Create a circular shape */
    width: 36px;  /* Set the width */
    height: 36px;  /* Set the height */
    padding: 8px;  /* Provide padding for the text */

    background: #fff;  /* Set a white background */
    border: 2px solid #666;  /* Add a gray border */
    color: #666;  /* Set the font color to gray */
    text-align: center;  /* Center the text horizontally */

    font: 32px Arial, sans-serif;  /* Define the font and size */
}

<div class="numberCircle">30</div>