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

Question

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

Is this possible and how is it achieved?

Answer 1

The answer of thirtydot is right but is missing a little point. You need to add position: relative , if you want to have centered value in the circle and include also different range of number. For example 123;

HTML:

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

CSS:

.numberCircle {    

border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;

font: 32px Arial, sans-serif;
}

but an easiest solution is to use Bootstrap

<span class="badge" style ="float:right">123</span>

Answer 2

This version does not rely on hard-coded, fixed values but sizes relative to the font-size of the div.

http://jsfiddle.net/qod1vstv/

CSS:

.numberCircle {
    font: 32px Arial, sans-serif;

    width: 2em;
    height: 2em;
    box-sizing: initial;

    background: #fff;
    border: 0.1em solid #666;
    color: #666;
    text-align: center;
    border-radius: 50%;    

    line-height: 2em;
    box-sizing: content-box;   
}

HTML:

<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>

Answer 3

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

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

Answer 4

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.

Answer 5

the easiest way is using bootstrap and badge class

 <span class="badge">1</span>