【CSS】丸を作る方法

CSSで丸を作る方法を紹介します。

中に数字を入れて丸数字にしたり、文字を入れたものをいくつか並べて図のようにしたりと、何かと使用する機会があります。

サンプルコード

HTML

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

CSS

.circle {
  background: #84ccc9;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

border-radius: 50%;を指定するだけです。
正円を作る際は幅と高さを同じ値に指定します。