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

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

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

ステップ1)スタイルシートのコード

以下のように書く。

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

ステップ2)HTMLソースのコード

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

<div class="note">
メッセージ
</div>
関連キーワード