Firefox,Safariで通用する角を丸めるCSS (IEには非対応)

以前rico.jsを使ってボックスの角を丸める方法をブログのエントリーに書いたが Firefox,Safari(Webkit)だけの対応でよいのであれば、（最近では） もっと簡単な方法がある。

ステップ１）スタイルシートのコード

以下のように書く。

.note{
        background-color:#CCC;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
}

ステップ２）HTMLソースのコード

こちらには角を丸めたボックスを表示したい部分のHTMLに 以下のように書く。

<div class="note">
メッセージ
</div>