How to add a Circle around a Number in CSS ?

Last Updated : 29 Dec, 2023

In the article, we will learn how to add a Circle around a number in CSS. We can easily add a circle around the number by setting the border-radius property to 50% of a specified element. Here, we will understand two methods for achieving a circle around a number:

The first method used width and line-height values to prevent the number from overflowing but the value must be changed accordingly depending on the number length.
The second method uses the display property of the inline-block for rounded circles having varying lengths.

Table of Content

Circle having the same length
Circle having varying length

We will explore the above approaches with the help of examples.

Circle having the same length

Add elements having the text of numbers in the HTML file.
Use the width and line-height property and set the border radius to 50% for a circle.
To prevent large numbers from causing the circle to become oval use the line-height property and set the value same as the width value but for huge numbers.
You have to increase the width and line-height value to prevent overflowing.

Example: The below example illustrates adding a circle around a number in CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title> 
          How to Add a Circle 
        Around a Number in CSS 
    </title> 
    <style> 
        .container { 
            display: flex; 
            justify-content: space-evenly; 
        } 
  
        .numbers { 
            width: 50px; 
            line-height: 50px; 
            border-radius: 50%; 
            text-align: center; 
            background-color: rgb(7, 122, 7); 
            color: white; 
        } 
  
        h1 { 
            color: green; 
            text-align: center; 
        } 
  
        p { 
            text-align: center; 
  
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksForGeeks</h1> 
    <p>How to Add a Circle 
        Around a Number in CSS</p> 
    <div class="container"> 
        <p class="numbers">1</p> 
        <p class="numbers">10</p> 
        <p class="numbers">100</p> 
        <p class="numbers">1000</p> 
        <p class="numbers">10000</p> 
    </div> 
</body> 
  
</html>

Output:

Circle having varying length

In an HTML file, each number is present in a span which can be enclosed under a div with a class circle.
The trick is to put both the enclosure div and span as a display of inline-block and then in the div add other properties which are a border radius of 50% and line-height of 0 to get a perfect rounded circle.
In the span element put the appropriate padding and margin value according to your requirement but the padding value must be in % to avoid creating ovals.
You do not have to change any values of the property as this approach dynamic prevents numbers from overflowing from the circle.

Example: The below example shows how to add a circle around a number with varying lengths in CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title> 
          Circle around the Numbers 
        with varying length 
    </title> 
    <style> 
        h1 { 
            color: green; 
            text-align: center; 
        } 
  
        p { 
            text-align: center; 
  
        } 
  
        .container { 
            display: flex; 
            align-items: center; 
            justify-content: space-evenly; 
        } 
  
        .circle { 
            display: inline-block; 
            line-height: 0px; 
            border-radius: 50%; 
            font-size: 32px; 
            background-color: green; 
            color: white; 
        } 
  
        .circle span { 
            display: inline-block; 
            padding-top: 50%; 
            padding-bottom: 50%; 
            margin-left: 8px; 
            margin-right: 8px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GFG</h1> 
    <p> 
        Circle around the Numbers 
        with varying length 
    </p> 
    <div class="container"> 
        <span class="circle"> 
            <span>1</span> 
        </span> 
        <span class="circle"> 
            <span>10</span> 
        </span> 
        <span class="circle"> 
            <span>100</span> 
        </span> 
        <span class="circle"> 
            <span>1000</span> 
        </span> 
        <span class="circle"> 
            <span>1000000000</span> 
        </span> 
    </div> 
</body> 
  
</html>