CSSだけで円を描く方法と、それを使った閉じるボタンの例。（CSS おれおれ Advent Calendar 2012 – 02日目）

円を描く前に、角丸の話をしましょう。というか、角丸の丸をめっちゃ丸くしたのが円です。（ネタバレ）

角丸 `border-radius`

.curled-box {
  border-radius: 4px;
}

上記の例では半径4pxの円を使って、角を丸くします。

幅と高さいっぱいに角丸を指定すると円になります。

.curled-box {
  border-radius: 10px;
  height: 20px;
  width: 20px;
}

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

border-radiusの値をパーセントで指定したとき、その領域の幅と高さに対する割合になります。なので全体の半分、50%を半径に指定する事でぴったりの丸になるのです。

ちなみに元の領域を正方形でない長方形の場合は楕円になります。

border-radiusは他にもできる事があります。

今回は紹介しないので、参考リンクから仕様書やMDNの解説などご覧ください。

個人的によく使います。

右上の (×) のところ、画像は使っていません。（デザイン自体はセンスのなさが露呈していますが、どうかご容赦願います……。）

ちなみにここではスタイルの実装だけですが、CSSだけで閉じる動作までやりたいなって考えてる方はこちらを:

※「真面目に不真面目」な、冗談の類のネタです。念のため。