Удалите овальный граничный радиус при появлении 2-значных чисел

Я пытаюсь установить идеальный круг и сделать это, когда мне нужно показывать цифры от 1 до 9, но он становится испорченным, когда отображаются две цифры. Кажется, я не вижу выхода.

Вот html:

8 9 10 

CSS:

 span{ float: left; font-size: 10px; position: relative; border: 1px solid #000; border-radius: 50%; padding:5px 10px; margin: 5px; } 

Посмотрите, как граница границы вокруг 10 беспорядочна и становится овальной 🙁

Пример: http://jsfiddle.net/aKmF6/21/

Вы должны определить высоту и ширину, попробуйте следующее:

 span { font-size: 10px; position: relative; border: 1px solid #000; border-radius: 50%; width: 20px; height: 20px; display: inline-block; text-align: center; line-height: 20px; } 

Вам нужно будет установить высоту и ширину:

 span{ float: left; font-size: 10px; position: relative; border: 1px solid #000; border-radius: 50%; margin: 10px; width: 32px; height: 32px; line-height: 32px; text-align: center; } 

http://jsfiddle.net/aKmF6/22/