ホームへ

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で丸円・楕円を作る方法

正円

  • 縦横を同じサイズにする
  • border-radius:50%を指定

楕円

  • 縦横を自由に指定する
  • border-radius:50%を指定

両端が半円

  • border-radiusをpxやvwなど%以外の単位で指定
  • border-radiusには短辺の半分以上の数値を指定

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

マンガで読める関連記事