【CSS】正円・真円を作成する方法｜border-radiusプロパティ

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

CSSで正円・真円（完全な円）を作成する例

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

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

上記HTMLのに要素に、次のCSSの例を指定することで正円となります。

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

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

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

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

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

border-radiusプロパティの詳細については、以下の参考サイトを確認してみてください。