スポンサード

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

画像を角丸で表示させる

<img> タグに直接 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);
}

こんな感じで表示されます。

IE 向けのサンプルはこちら。
IE6、IE7、IE8 用に PIE.htc 補正のデモ

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

スポンサード