Sometimes, we want to use CSS to surround a number with a circle.
In this article, we’ll look at how to use CSS to surround a number with a circle.
How to use CSS to surround a number with a circle?
To use CSS to surround a number with a circle, we use the border-radius property.
For instance, we write
<div class="numberCircle">30</div>
to add a div with a number.
Then we write
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
to add the border-radius: 50%; style to make the div round.
We add border: 2px solid #666; to add a border.
Conclusion
To use CSS to surround a number with a circle, we use the border-radius property.
