CSSでIEにも角丸を適用する方法をご紹介!

IE9以降ではborder-radiusを使って角丸を適用できますが、IE8以前のブラウザではborder-radiusはサポートされておらず、そのままでは角丸を適用できません。この記事ではCSSでIE8以前のブラウザでも角丸を適用する方法を紹介していきます。

コンテンツ [表示]

  1. 1CSSでIEにも角丸を適用したい
  2. 2CSSでIEにも角丸を適用する方法

CSSでIEにも角丸を適用したい

CSSのborder-radiusプロパティを使うことで要素の角を丸くすることが出来ます。ですが、IE8以前のブラウザではborder-radiusプロパティはサポートされておらず、そのままでは要素の角を丸くすることができません。

とある方法を使うことでIE8以前のブラウザでもborder-radiusプロパティを使うことが出来るようにすることができます。

この記事ではIEにも角丸を適用される方法を紹介していきます。

CSSでIEにも角丸を適用する方法

それではIE8以前のブラウザでも角丸を適用する方法をサンプルコード付きで解説していきます。

まずはGoogle ChromeやIE9以降のブラウザで角丸を適用するようにborder-radiusプロパティを使っていきましょう。

index.html

<div class="radius">
  ダミーテキストダミーテキストダミーテキスト
  ダミーテキストダミーテキストダミーテキスト
  ダミーテキストダミーテキストダミーテキスト
  ダミーテキストダミーテキストダミーテキスト
</div><!-- .radius -->

index.css

.radius{
  width: 600px;
  padding: 20px;
  margin: 20px auto;
  background: #CCC;
  border: 4px solid #F75A00;
  border-radius: 20px;
}

このままでは普通で、IE8以前のブラウザでは角丸になりません。

IE8以前のブラウザで角丸を適用するにはGoogle Codeで配布されているborder-radius.htcというファイルを使います。

border-radius.htcファイルは下記のサイトで配布されているので、ダウンロードしてきてください。

Google Code Archive - Long-term storage for Google Code Project Hosting.

ダウンロードしてきたborder-radius.htcファイルをプロジェクトのCSSファイルと同じ階層に配置します。

その後、下記のコードを追記してborder-radius.htcファイルを読み込みます。

radius{
  width: 600px;
  padding: 20px;
  margin: 20px auto;
  background: #CCC;
  border: 4px solid #F75A00;
  border-radius: 20px;
  /* 追記 */
  behavior: url(border-radius.htc);
}

たったこれだけでIE8以前のブラウザでもborder-radiusプロパティを使って角丸を適用することが出来ます。

IE8以前のブラウザでどうしても角丸を適用する必要がある場合はぜひ使ってみてくださいね。

あわせて読みたい
border-radius
CSSのborder-radiusのプロパティを使うことで「角丸」を実現することが出来ます。border-radiusの基本的な使い方を解説します。
今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

みぎさん
ライター

みぎさん

大阪府の現役システムエンジニアです。WEB制作やWEB開発、ライティングなど幅広く活動しております。 【言語/FW】HTML,CSS,Sass,JavaScript,jQuery,Vue.js,PHP,WordPress,Laravel,Java