Remove oval border-radius when 2 digit numbers show up

Tags: html,css,css3

Problem :

I'm trying to set a perfect circle and manage to do that when I have to show the numbers from 1 to 9 but it gets messed up when two digits are shown. I can't seem to figure a way out.

Here's the html:

<span>8</span>
<span>9</span>
<span>10</span>

The CSS:

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

See how the border radius around 10 messes up and becomes an oval :(

Example: http://jsfiddle.net/aKmF6/21/

---

Solution :

You need to define height and width, try this:

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;
}