How to Create a Circle around Number using CSS

Its simple. I’ll show you how create a Circle around a number, or a text on your web page, using CSS.

Create circle around number using CSS

Let’s us assume, you are using a <span> element (try using <div> element either), where you have defined a number like this.

Now, lets put add a circle around it using CSS.

<span style='
    width: 25px;
    height: 25px;
    line-height: 25px;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: solid 1px #1464F4;
    color: #1464F4;
    text-align: center;
    display: block;'>  12 
</span>

Try it

I have defined the style in-line. You can define it inside a .css file or within the <style> tag, like this.

<body>

  <style>
    .circle {
        width: 25px;
        height: 25px;
        line-height: 25px;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: solid 1px #1464F4;
        color: #1464F4;
        text-align: center;
        display: block;'
    }
  </style>

  <span class='circle'>
    12
  </span>
</body>

I’ll explain the styling. I have first defined the width, height and line-height properties to the element (<span> element). You can adjust the values according to your requirement.

The line-height and width is important, as to define the size of the element.

Next, I have defined the border-radius property at 50%, followed by the property border.

-moz-border-radius: 50%;
border-radius: 50%;
border: solid 1px #1464F4;

The text-align property will center the number inside the circle. The diplay property is necessary in this case, since I am using a <span> element.
You can ignore the display property if you are using a <div> element.

Remember: If the number (or length of the text) increases, so should the width, height and line-height. For example,

<style>
    .circle {
        width: 120px;
        height: 120px;
        line-height: 120px;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: solid 3px #1464F4;
        background-color: #ffffff;
        color: #1464F4;
        text-align: center;
        display: block;
    }
</style>
  
<span class='circle'> 1200 </span>

Try it

Why font is important here?

Now, in many cases the font of the number (or text) plays a very important role.
For example, the below example has a perfect circle, however the number is not property placed, since I have defined a font with a font-size.

<style>
    .circle {
        width: 100px;
        height: 100px;
        line-height: 100px;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: solid 3px #1464F4;
        background-color: #ffffff;
        color: #1464F4;
        text-align: center;
        display: block;
        
        font: 15px Calibri;
    }
</style>

<span class='circle'> 12 </span>

The result 👇 will look like this. Definetly, not what I want.

Ok, try it here!

The correct way to define a font in this case is by defining the font-family, followed by the font-size. Here’s how you should do this.

<style>
    .circle {
        width: 100px;
        height: 100px;
        line-height: 100px;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: solid 3px #1464F4;
        background-color: #ffffff;
        color: #1464F4;
        text-align: center;
        display: block;
        
        font-family: Calibri;
        font-size: 20px;
    }
</style>
  
<span class='circle'> 12 </span>
<span class='circle'> 1200 </span>  
<span class='circle'> 12000 </span>  
<span class='circle'> 120000 </span>  
<span class='circle'> 1200000 </span>

Try it

You will get a result like this. 👇

12 1200 12000 120000 1200000

If the text is long or if it’s a big number, then just increase the size of width, height and line-height.

<span class='circle' style='width: 450px; height: 450px; line-height: 450px;'>
    Hi, my name is Arun Banik and I am programmer. :-) 
</span>

That’s it. Thanks for reading. 🙂

← PreviousNext →