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

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

border-radiusって?

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

書き方

html

CSS

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

もっと細かく

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

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

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

水平、垂直を個別に指定

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

のように書きます。

ベンダープレフィックス

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

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

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

まとめ

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク