以前に[CSS]CSS3 のborder-radius で角丸を作る方法の記事でもborder-radiusの基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。
画像を角丸で表示させる
<img>タグに直接border-radiusを適用させます。例として、四隅を 10px の角丸にしています。
IE6、IE7、IE8 用にPIE.htcで補正
個人的にはborder-radiusに関してはIE下位バージョン向けの対応しませんが、どうしても必要な場合にはPIEで補正をかけます。
IE向けのサンプルはこちらです。↓こんな感じで表示されます。
IE6、IE7、IE8 用に PIE.htc 補正のデモ
※PIE.htcの使い方は、別途こちらの記事で紹介しております。
コメント