数年前にあるサイトを制作したときには角丸を表示できるのはFirefoxだけでした。IE等他のブラウザでは単純な枠線でしか表示できなかったのです。日頃はFirefoxしか使っていないので、そのことはすっかり忘れていたのですが、つい最近になってIE9（Microsoft Internet Explorer 9）で角丸が表示できることを知りました。そこで、自分のサイトでも遅ればせながらひと月ほど前に使ってみました。この画面でいうと、左側のメニュー部分がそれです。

IE9だけではなくApple SarariやGoogle Chromeなども角丸は表示できているようです。同じIEでもIE8では表示できませんでした。これはCSSのバージョン3で追加された　border-radius　というプロパティに対応しているかどうかという違いです。

さて、CSS3には　box-shadow　というプロパティもあります。それを使うと
この画像に対して
このような効果をつけることができます。

いまあなたのブラウザではこの上の画像はどのように見えていますか？見え方によってお使いのブラウザのレベルがわかります。

見え方	画像	レベル
四角の枠だけ		作者の意図がまったく反映されない 不合格レベルです。 Firefoxの使用をお勧めします。
角は丸くなるが 影は付かない		作者の意図が半分しか反映されない 残念レベルです。 Firefoxの使用をお勧めします。
角丸影付き		作者の意図が完全に反映される 合格レベルです。

Firefoxのインストールはとても簡単です。ここにアクセスして下さい。もちろん無料ですし、メールアドレスの登録など一切必要ありません。Webブラウザはいくつでもインストールすることができます。Firefoxをインストールしたからといって、他のブラウザが使えなくなるわけではありませんし、同時にいくつものブラウザを開くこともできます。ブラウザによる機能の比較をしてみるのも面白いですよ。

Firefoxにはいろいろなアドオンを追加してより便利に使うことができます。僕が使っているのは以下の物です。

このページのソースを見ればわかることですが、当該のクラスを紹介します。

使うときには　<div class="waku2">　とか　<p class="waku2"> と書けばいいのです。

最後に、このページの制作時点でのFirefoxの画面を以下に載せておきます。

2013年3月26日　記