CSS Number in a Circle

Creating a number within a circle using CSS.

by jstol

HTML

<body>
    <div class="circle">
        <p>30</p>
    </div>
</body>

CSS

.circle {
    border: 0.1em solid grey;
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
}

.circle p {
	margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    color: grey;
}

JavaScript

/* Creating a number within a circle using CSS */