How Can I Create Circular Number Backgrounds Using CSS?

Surrounding Numbers with Circle Backgrounds Using CSS

Enhancing the visual appeal of numbers by enclosing them in circular backgrounds can be achieved effortlessly with the power of CSS. Follow these steps to accomplish this:

In your CSS file, create a class with the following properties:

.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;
}

In your HTML file, wrap the number in a

element and apply the .numberCircle class.

<div class="numberCircle">30</div>

This will surround the number with a circular background, as shown in the image provided. Adjust the CSS properties as needed to customize the appearance of the circle and the number within it.

The above is the detailed content of How Can I Create Circular Number Backgrounds Using CSS?. For more information, please follow other related articles on the PHP Chinese website!