[CSS]imgタグの画像をborder-radiusで角丸にして表示する方法

CSSプロパティ

2013.04.11

以前に[CSS]CSS3 のborder-radius で角丸を作る方法の記事でもborder-radiusの基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。

画像を角丸で表示させる
IE6、IE7、IE8 用にPIE.htcで補正

画像を角丸で表示させる

<img>タグに直接border-radiusを適用させます。

例として、四隅を 10px の角丸にしています。

.box img	{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.box img {

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

}

IE6、IE7、IE8 用にPIE.htcで補正

個人的にはborder-radiusに関してはIE下位バージョン向けの対応しませんが、どうしても必要な場合にはPIEで補正をかけます。

.box img	{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	/*IE下位バージョン用に補正*/
	position:relative;
	behavior: url(./PIE.htc);
}

.box img {

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

/*IE下位バージョン用に補正*/

position:relative;

behavior: url(./PIE.htc);

}

IE向けのサンプルはこちらです。↓こんな感じで表示されます。

IE6、IE7、IE8 用に PIE.htc 補正のデモ

※PIE.htcの使い方は、別途こちらの記事で紹介しております。