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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

In this snippet, you can also find a way of adding a circle around numbers having one to four 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>

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 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: 32px 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: 32px Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="circle">1</div>
  </body>
</html>

Result

1

Next, we are going to show an example where we use circles around numbers with one to four digits. This example can be used for any amount of text and any size circle.

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

Example of adding a circle around numbers with one to four 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>

In our last example, we use -moz- and -webkit- prefixes with the border-radius property. Here, we also 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%;
        -moz-border-radius: 50%;
        -webkit-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>