I came across a site the other day by accident that had a really nice way of displaying the numbers in an ordered list. Actually, it wasn’t an ordered list, per se. It was a uniform list with numbers set to the left to look like a numbered list. The effect was really cool, could be adapted to a lot of different looks and colors, and is easily repeatable.

The CSS

There’s a few parts to this but most of it is very standard. The key to the round numbers is simple CSS border styling using a little trick where you set the border ‘radius’ to half the size of the height and width which need to be the same. In other words, the round areas are actually squares with the borders radiused to half their height and width which is 42px (h) and 42px (w). So the radius is set to 21px. The result is a circle. Then, we simply set the display of the number to half the size (20px) and have it centered. What you see above is the results.

The Code

And the HTML

Note that the ‘container’ is optional.

Rules of Conduct


	
1 Title Here Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.
	
2 Title Here Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.
	
3 Title Here Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.
	
4 Title Here Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.
	
5 Title Here Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.
	
6 Title Here Augue urna nec porttitor, in turpis et augue, aliquam nisi nisi enim, tempor pellentesque urna nunc nisi ultricies, purus scelerisque tortor tincidunt, eros turpis.