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

in simplified example have 4 circles, each varying border-width , trying maintain equal line height in each keep them horizontally aligned.

however border width seems effect line height (despite being technically outside box?)

is there anyway solve 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/

you can remove line-height, use display:table-cell instead, , add vertical-align:middle; 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; }