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

I would like to surround a number in a circle like in this image:

Is this possible and how is it achieved?

Solution 1:

Here's a demo on JSFiddle and a snippet:

.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>

My answer is a good starting point, some of the other answers provide flexibility for different situations. If you care about IE8, look at the old version of my answer.

Solution 2:

The problem with most of the other answers here is you need to tweak the size of the outer container so that it is the perfect size based on the font size and number of characters to be displayed. If you are mixing 1 digit numbers and 4 digit numbers, it won't work. If the ratio between the font size and the circle size isn't perfect, you'll either end up with an oval or a small number vertically aligned at the top of a large circle. This should work fine for any amount of text and any size circle. Just set the width and line-height to the same value:

.numberCircle {
    width: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    border: 2px solid #666;
}

<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>

If you need to make the content longer or shorter, all you need to do is adjust the width of the container for a better fit.

See it on JSFiddle.

Solution 3:

If it's 20 and lower, you can just use the unicode characters ① ② ... ⑳

http://www.alanwood.net/unicode/enclosed_alphanumerics.html