こんにちは！ゆぅです！

今回のテーマは「CSS3で角丸はじめの一歩」！

前回のグラデーションに引き続き、CSS3の角丸をぼちぼち使ってみたいと思います。

材料

PIE.htc をご用意下さい。
もう持ってる人は必要ないです。PIE.htcについては前回「CSS3でグラデーションはじめの一歩」を読んでくださいね。

使い方

使い方は角丸を指定したいcssセレクターにbehaviorの指定でPIE.htcを設定するだけです。

HTML

<div class="btn">角丸ピンクボタン風</div>

前々回のアコーディオンを外すととたんにシンプル。。。

CSS

.btn {
    background: #FB2B75;
    color:#FFFFFF;

    -webkit-border-radius: 5px;/* webkit */
    -moz-border-radius: 5px;/* fx */
    /*------PIE setting-------*/
    -pie-border-radius: 5px;
    behavior: url(PIE.htc);
   /*------------------------*/
}

角丸の設定をしているのは5行目からですね。
safari、chrome用の-webkit-border-radiusを設定。
Firefox用の-moz-border-radiusを設定。
そして、IE用の-pie-border-radiusを設定し、behaviorの設定をする。

pxで角丸具合を指定します。
ひとつだけpxを指定すると4つの角全てに適用されます。
個別にpxを指定する場合は
「-pie-(Firefoxの場合-moz-)border-radius:(1:左上)px (2:右上)px (3:右下)px (4:左下)px;」
の順で指定できるようです。

safari、chrome用はこの指定だとうまく角丸になってくれない
みたい(私の古いsafariだとだめでした。。。)なので、
-webkit-border-top-left-radius: 左上px;
-webkit-border-top-right-radius: 右上px;
-webkit-border-bottom-left-radius: 左下px;
-webkit-border-bottom-right-radius: 右下px;
と、個別に設定してください。Firefox用の指定はこちらの方法でも使えました。

指定方法をまとめるとこんな感じ。

色々やってみたデモは下記。

デモを見る

前回のデモの流用なのでグラデーションもしてます。

結果

IEのスクリーンショットです。ばっちり角丸ってますね

グラデーションを追加するとさらにボタンっぽくなります。

枠線(border)つけてボックス風にしたりとか、上角だけ角丸にしてタブっぽく見せたりとか、
色々使えそうですね。