CSSのborder-radiusで丸円・楕円を作る方法

border-radiusは角を丸くするCSSです。
これを使って円を作ることができます。

円はちょっとした装飾などよく使います。

CSSのborder-radiusで丸円・楕円作る方法を説明します。

正円

正円にするにはpaddingを含めてwidthとheightを同じ値にします。

さらに「border-radius:50%」を指定します。

html

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

CSS

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

ちなみにborder-radiusは50%以上の数値なら結果は同じなので100%で覚えても問題ありません。

上記例ではbackground-colorで背景色を一色に指定していますが、画像を指定すると正円で切り抜きされた画像にできます。

楕円にするには「border-radius: 50%」を指定します。

widthとheightの値は自由に指定しましょう。

html

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

CSS

.circle{
    width: 200px;
    height: 100px;
    border-radius: 50%;
    background: #42b3e5;
}

両端を半円にするにはborder-radiusをpxやvwなど%以外の単位で指定します。

border-radiusの値は、paddingを含めたwidth・heightのうち短辺の半分以上の数値を指定します。数値はいくら大きくてもいいのでメンドウならとりあえず1000pxと指定してもOKです。

html

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

CSS

.circle{
    width: 200px;
    height: 100px;
    border-radius: 50px;
    background: #42b3e5;
}

正円

楕円

両端が半円

以上、CSSのborder-radiusで丸円・楕円を作る方法でした。

マンガでわかるホームページ作成