css border-radiusでボックス要素を正円表示にしたい

Question

###解決したいこと
css3のborder-radiusで正円を作りたいのですが楕円形に表示されてしまいます。
どうしたら正円に表示されるでしょうか。

###html

<div class="follow-us">
          <a href="https://www.facebook.com/Progate-742679992421539" class="social-icon" target='_blank'>
            <span class="fa fa-facebook"></span>
          </a>
          <a href="https://twitter.com/prog_8" class="social-icon" target='_blank'>
            <span class="fa fa-twitter"></span>
          </a>
</div>

###css

.social-icon {
  vertical-align: top;
  text-align: center;
  display: inline-block;
  background: rgba(94, 144, 255, 0.75);
  width: 52px;
  height: 52px;
  padding-top: 13px;
  border-radius: 50%;
  color: #e3e3e3;
  font-size: 24px;
  margin: 0 15px;
}

###画像(楕円形に表示されている)

Answer 1

padding-topが邪魔してる気がします

Comments

[kotori_00]

回答ありがとうございます！
padding-top、確かに少し邪魔になっていました。

Answer 2

下記のようにしてみてはいかがでしょうか。

.social-icon {
    /* 略 */
    box-sizing:border-box;
}

Comments

[kotori_00]

回答ありがとうございます！
padding-top:10px;
box-sizing:border-box;
以上に変更したところ、正円表示にしてフォントを真ん中に表示することができました。