• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

以前に [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 の使い方は、別途こちらの記事で紹介しております。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください