【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プロパティの値を50%で指定

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

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

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

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

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

参考サイトなど

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

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

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