CSS3 & Sass：border-radiusで円を作るなら50%指定がよい

例えばCSSで円を作る際下記のようなCSSになります。

.box {
  width: 30px;
  height: 30px;
  border-radius: 30px;
}

しかし正円を作るならば%指定した方が良いです。

.box {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

Sassの記述でさらに効率化させるなら下記になります。

.border-radius-round {
  @include border-radius(50%);
}
.box {
  @extend .border-radius-round;
  width: 30px;
  height: 30px;
}

なお%指定の場合、縦横のサイズが同一でない場合は楕円状にゆがみます。
正円でない場合はpx指定の方が好ましくなります。