[CSS3]画像を使わずに「角丸」を実現する方法

見出しやボタンなどの角を丸くする方法。

以前は「角」に使う画像なんかを使ってうまくレイアウトするテニクカルなやりかたが主流だったが、CSS3になってから驚くほど簡単に綺麗なコードが書けるようになった。スタイルシートだけで表現でき、画像の準備も必要ない。
これは覚えておいて損はない。

早速見てみよう。



スタイルシート

.kadomaru {
  border: 8px solid blue;
  border-radius: 8px; /* CSS3 */
  -webkit-border-radius: 8px; /* Safari, Google Chrome用 */
  -moz-border-radius: 8px; /* Firefox用 */
}

HTML

<div class="kadomaru">角丸テスト</div>

表示してみる。

角丸テスト

しかし、このプロパティはIE8では未実装だそうでorz なのでIEに対応させるには、ここから border-radius.htc をダウンロードし、スタイルシートに以下のように追記する。
スタイルシート

.kadomaru {
  border: 8px solid blue;
  border-radius: 8px; /* CSS3 */
  -webkit-border-radius: 8px; /* Safari, Google Chrome用 */
  -moz-border-radius: 8px; /* Firefox用 */
  behavior: url(border-radius.htc); /* IE用 */
}

これを表示してみるとこうなる。IEでもうまく表示できているかな？

角丸テスト