CSSで正円を作成したサンプル

HTML

<div class="circle"></div>
<br>
<div class="circle2"></div>

CSS

.circle {
  width: 50px;
  height: 50px;
   /* 50%を指定 */
  border-radius: 50%;
  background: #C00;
}
.circle2 {
  width: 70px;
  height: 70px;
   /* 下記の指定だと幅と高さが変更になっても
      正円を維持できる */
  border-radius: 50%;
  background: #C00;
}