IEで角丸を使うために

角丸はかどを丸めるためのCSSで、border-radius:20px;などと記述する。これはCSS3で実現しているがInternet Explorer 7や8ではサポートされていない。(Internet Explorer 9からはサポートされている) しかし、未だIE8などを使っている人も多くいるので、IE8で角丸する方法を調べたところ「CSS3 PIE」という便利なものがあった。 使い方は次のとおりである。

(1)CSS3 PIEを下記よりZIP形式の圧縮ファイルをダウンロードする。
   CSS3 PIE: CSS3 decorations for IE (英語サイト)

(2)この圧縮ファイルを解凍する。

(3)本体である「PIE.htc」ファイルをサーバにアップロードする。例えば 、ウェブサイトのURLが  http://www.example.com/ であれば、 http://www.example.com/PIE.htc の位置にアップロードすればOK。

(4)CSSに組み込む

  セレクタ {
    background-color: #c4f254;
    padding: 20px;
    border-radius: 20px;
        position:relative;
        behavior: url(“http://www.example.com/PIE.htc “); 
       }

コンタクトフォームを角丸した例。