CSS おれおれ Advent Calendar 2012 – 02日目

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

角丸 border-radius

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

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

角丸を大きくして円に

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

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

円にするなら半径は50%が楽

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

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

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

その他の細かい指定も

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

  • 縦と横とで別の半径を指定する（楕円になる）
  • 四隅の丸さをばらばらに設定できる

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

応用例 : 閉じるボタン

個人的によく使います。

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

動作もやりたい？

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

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

参考