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.
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>
|
Output: