How to use CSS to surround a number with a circle?

Using CSS to surround a number with a circle will require some steps, you need to ensure using reasonable value for the border radius and also the border where necessary to be able to achieve the result we want.

Below is a demo:

numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
<div class="numberCircle">30</div>