【CSS】正円・真円を作成する方法|border-radius

今回は、CSSで正円・真円(完全な円)を作成する方法となります。

CSSで正円・真円(完全な円)を作成する例

例では、正円とするHTMLの要素を以下とします。

<div class="circle"></div>

上記HTMLのに要素に、以下のCSSの例を指定することで正円を作成します。

.circle{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color:#F00;
}

正円を作成するポイント

CSSで正円を作成するポイントは、正円とする要素に指定した以下のプロパティの値となります。

  • width・heightプロパティを同じ長さの値で指定
  • border-radiusプロパティの値を、width・heightプロパティの値の50%以上で指定

上記のプロパティの値を指定することにより、CSSで正円・真円(完全な円)を作成することができます。

border-radiusプロパティについて

CSSのborder-radiusプロパティは、要素の4つの角それぞれに、丸みをもたせることができるプロパティとなり、水平方向と垂直方向の半径の値を指定することができます。

border-radiusプロパティをパーセンテージで指定すると、指定した要素の幅と高さに対する割合を半径とした丸みを作成します。

border-radiusプロパティの詳細やベンダープレフィックスについては、以下のリンク先を参考にしてみてください。

border-radius-CSS3リファレンス

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。