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