How to use CSS to surround a number with a circle?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *