【CSS】画像の角を丸めたり円形で表示したい

Posted on by ofuta / Posted in CSS

正方形の画像を角丸で表示
正方形の画像を角丸で表示したい時の指定です。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.shadow img{
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	display: inline-block;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無題ドキュメント</title>
</head>
<body>
	<div class="shadow"><img src="images/nyan.jpg" width="320"></div>
</body>
</html>

正円形にする場合には、正方形の画像じゃないと難しいかな？と思います。
長方形の画像を円で表示

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.shadow img{
	height: 320px;
	border-radius: 160px;
	-webkit-border-radius: 160px;
	-moz-border-radius: 160px;
	display: inline-block;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無題ドキュメント</title>
</head>

<body>

<div class="shadow"><img src="images/nyan.jpg" width="320"></div>
</body>
</html>

おまけ：シャドウも付けてかわいく縁取る
赤い縁取りでボタンっぽく

<!DOCTYPE HTML<
<html<
<head<
<style type="text/css"<
.shadow {
	width:320px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-bottom: 5px solid #f23064;
	border-left: 1px solid #f23064;
	border-right: 1px solid #f23064;
	background: #f23064;
}
.shadow img{
	margin: 0 0 -3px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	display: inline-block;
}
</style<
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"<
<title<無題ドキュメント</title<
</head<

<body<

<div class="shadow"<<img src="images/nyan.jpg" width="320"<</div<
</body<
</html<

使用した画像
nyan
写真AC > 生き物 > ネコ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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