[CSS3]border-radiusほぼ最終まとめ(IE対応)




border-radiusこれなしではサイト制作はできないぐらい多用している日々でございます。
ベンダープレフィックスもいらなくなったとこころでIE8にも対応させるべくまとめておきます。

border-radiusって?

手っ取り早く説明すると角を丸くするためのプロパティです。

書き方

html

<div class="b-radius-a">
	角丸ですー。
</div>

CSS

[CSS3]border-radiusほぼ最終まとめ(IE対応)

.b-radius-a {
	border:1px solid #000;
	border-radius:10px;
}

もっと細かく

基本、値を1つ指定すると4つの角を丸くしてくれますが、他にも以下のような指定方法があります。
●半角スペースで区切って値を4つ:4つの角を個別で指定できます。

border-radius:左上 右上 右下 左下;

●半角スペースで区切って値を3つ:左上 右上と左下 右下を個別に指定できます。

border-radius:左上 右上と左下 右下;

●半角スペースで区切って値を2つ:左上と右下 右上と左下を個別に指定できます。

border-radius:左上と右下 右上と左下;

水平、垂直を個別に指定

border-radius:20px/10px;

のように「水平/垂直」とすることで水平、垂直(縦横)の丸みを指定できます。
そして個別に指定するには

border-radius:10px 5px 15px 20px/5px 10px 20px 15px;

のように書きます。

ベンダープレフィックス

すでにchromeやFirefox、IE9、IE10はベンダープレフィックスなしのborder-radiusで大丈夫です。

IE8などのレガシーブラウザに対応する方法

そもそも角が丸いか尖ってるかで操作性等に支障はないと思います。実際ボクも気にしてません。
が、デザイン上どうしてもIE8でも角を丸くしなきゃならない場合は以前紹介したCSS3 PIEを利用する方法があります。
[CSS3]IE6~8でもCSS3を使えるようにするCSS3 PIE

まとめ

やっぱりネックになるのはIEですね・・・
クライアント様でも未だにIE7を使ってる方もいらっしゃいますし、このブログの閲覧者もIE7が全体の1%、IE6も1%います。
この1%を切り捨てていいものかどうか・・・迷わずスパッて感じですかねwww

タイトルとURLをコピーしました