画像や要素の角を丸める方法

2017/06/22

画像やブロックの角を丸めるには、border-radiusプロパティを利用しましょう。

サンプルコード

指定する長さが大きいほど丸まります。

div {
	border-radius: 50% ;
}

デモ

border-radiusに指定する長さが大きいほど丸まります。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		div {
			border: 1px solid #000 ;
			border-radius: 5px ;
		}
	</style>
</head>
<body>
	<div>角が丸まっています。</div>
</body>
</html>

横幅と高さが同じ要素に50%を指定すると、正円になります。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		div {
			width: 200px ;
			height: 200px ;
			border: 1px solid #000 ;
			border-radius: 50% ;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

サンプルコード

デモ

関連記事