April 24, 2012CSS3 has introduced some nice features, one of them is rounded corners. This is a little snippet to create a circled number looking like this:
<span class="step">1</span>A couple of tips:
If you want a bigger circle, change either font-size to enlarge everything by the same amount (both text and circle) or width, line-height and the border-radius' to only affect the circle (border-radius = half of the width and line-height values).
To center the circle with other text, place it in an element where you set a line-height that equals or exceeds the one of the circle.