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: #a5e3ff;
    border: 5px solid #ea9000;
    box-sizing: border-box;
}

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

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

borderを指定するとその円に沿った枠線ができます。

borderの枠線幅はwidthやheightに含まれません。これにより円や角丸がずれる場合があります。

box-sizing: border-boxを指定するとborderをwidthやheightに含めることができます。

ちなみにaタグを円にした場合、クリック範囲はちゃんと円の内側だけです。

楕円

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

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

html

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

CSS

.circle{
    width: 200px;
    height: 100px;
    border-radius: 50%;
    background: #a5e3ff;
    border: 5px solid #ea9000;
    box-sizing: border-box;
}

両端が半円

両端を半円にするには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: #a5e3ff;
    border: 5px solid #ea9000;
    box-sizing: border-box;
}

【まとめ】CSSのborder-radiusで丸円・楕円を作る方法

正円

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

楕円

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

両端が半円

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

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