How to Add a Circle Around a Number in CSS

Adding a circle around a number can be easily done with CSS. This can be done using the border-radius property.

In this snippet, you can also find a way of adding a circle around numbers having multiple digits.

Now, we’ll show the process step by step.

Create HTML

Create a <div> with a class name "circle" inside the <body>.
Place a number inside that <div>.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div class="circle">1</div>
  </body>
</html>

Try it Yourself »

Add CSS

Set the border-radius to "50%".
Specify the width and height of the element.
Style the class using the background, border, and color properties.
Center the number using the "center" value of the text-align property.
Specify the font-size and font-family of the number.

.circle {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 10px;
  background: #fff;
  border: 3px solid #000;
  color: #000;
  text-align: center;
  font-size: 32px;
  font-family: Arial, sans-serif;
}

Now we can see the full example.

Example of adding a circle around a number:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .circle {
        border-radius: 50%;
        width: 34px;
        height: 34px;
        padding: 10px;
        background: #fff;
        border: 3px solid #000;
        color: #000;
        text-align: center;
        font-size: 32px;
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="circle">1</div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo"> <div class="circle">1</div> </div>

Next, we are going to show an example where we use circles around numbers with multiple digits. This example works well for single-line text of any size.

Here, we’ll use the line-height property. Note that the width and line-height properties must be of the same value.

Note: Using the CSS line-height property for vertical centering works best for single-line text. If text wraps, it may break the layout.

Example of adding a circle around numbers with multiple digits:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .circle {
        width: 120px;
        line-height: 120px;
        border-radius: 50%;
        text-align: center;
        font-size: 32px;
        border: 3px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="circle">1</div>
    <div class="circle">100</div>
    <div class="circle">10000</div>
    <div class="circle">1000000</div>
  </body>
</html>

Try it Yourself »

In our last example, we use the display property set to "inline-block" to represent the element as an inline-level block container.

Example of adding a circle around a number using the line-height property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span.circle {
        background: #e3e3e3;
        border-radius: 50%;
        color: #6e6e6e;
        display: inline-block;
        font-weight: bold;
        line-height: 40px;
        margin-right: 5px;
        text-align: center;
        width: 40px;
      }
    </style>
  </head>
  <body>
    <span class="circle">1</span>
  </body>
</html>

Try it Yourself »