Circled number with pure CSS

CSS3 has introduced some nice features, one of them is rounded corners. This is a little snippet to create a circled number looking like this:

The CSS:

span.step {
background: #cccccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;

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

Related posts:


comments powered by Disqus