Equal line height with varying border width (border-box)

Question

In this simplified example I have 4 circles, each with varying border-width and I am trying to maintain equal line height in each to keep them horizontally aligned.

However the border width seems to effect the line height (despite being technically outside the box?)

Is there anyway to solve this without manually adjusting each line-height?

width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid #1daeec;
line-height: 50px;

Example: http://jsfiddle.net/vcJ3G/

Answer 1

You can remove the line-height, use display:table-cell instead, and add vertical-align:middle; to your stat class.

jsFiddle example

.stat {
    display: table-cell;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 1px solid #1daeec;
    text-align: center;
    margin: 10px;
    font-size: 16px;
    color: #1daeec;
    text-transform: uppercase;
    vertical-align:middle;
}

Answer 2

Your css works fine all you have to do is remove some from top section

* {
    margin: 0px;
    padding: 0px;

}

http://jsfiddle.net/techsin/vcJ3G/15/