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

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/

Answer 3

Came across this and thought myself how is it possible to do it without using table-cell, my solution probably not the best, but I just decide to share it anyway.
http://codepen.io/svdovichenko/pen/rObzqM?editors=110
adding <span>1</span> (can use class inside spam didn't use for this example)
.stat{
position: relative;
}
and
span {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}