CSS3で最も簡単にクロスブラウザの角丸を実装したい。
そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。
Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。
クロスブラウザの角丸を実装するには、「border-radius.htc」ファイルをダウンロード、配置して、CSSに以下のように記述すればOKです。
CSS3
-moz-border-radius: 32px;//for Firefox
-webkit-border-radius: 32px;//for Safari and chrome
border-radius: 32px;//CSS3
behavior: url(border-radius.htc);//for IE
すごく簡単な方法なので、CSS3での角丸はこれで決まりなのでは、と思っちゃいますね。
デモもダウンロードできるので、ぜひ見てみてください。
Rounded corner HTML elements using CSS3
■関連記事
IEをモダンブラウザのように扱う方法10
今日のCREAMU
あっという間に金曜日ですね。今週もばたばただったけど、充実していました。今日はイタリアンのお店で食事してきていい気分です。
関連するエントリー
- floatした画像の横のテキストの回り込みをクリアするCSS
- CSS3を使ったボタンジェネレータ
- CSSだけでJavaScriptのような動きを実装するサンプル30
- クロスブラウザで動作するCSSグラデーション
- CSS3で何が実現できるかがわかるジェネレータ
- クールなCSSグリッドフレームワーク
