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

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

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

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

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

結論

正円

縦横を同じサイズにする

楕円

縦横を違うサイズにする
border-radius:50%を指定

角丸ボタン風

border-radiusをpxなどの絶対指定にする

以下で詳しく説明します。

正円

html

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

CSS

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

正円にするにはpaddingを含めてwidthとheightを同じ値にします。
border-radius:50%を指定します。
ちなみに50%以上の数値なら結果は同じなので100%で覚えてもまぁいいでしょう。

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

楕円

html

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

CSS

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

楕円はwidthとheightの値が違うだけで他は正円と同じです。

実際のところはサイト上で楕円を使うことはほぼないでしょう。

角丸ボタン風

html

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

CSS

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

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

まとめ

正円

縦横を同じサイズにする

楕円

縦横を違うサイズにする
border-radius:50%を指定

角丸ボタン風

border-radiusをpxなどの絶対指定にする

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

関連記事