15. 角丸ボックス・円・楕円を作る border-radius

目次

ボックスの角を丸くする

ボックスの角を丸くするには、border-radiusプロパティを使います。

値はpxで指定することができ、pxの値は、どのサイズの半径の円で角を丸くするかに対応しています。また、値を4つ指定したときは、左から順に左上・右上・右下・左下の値になります。

このように、左上と右下の角が半径50pxの円で、右上と左下の角が半径80pxの円で切り取られているのが分かります。

値を1つだけ指定したときは、四方の角がすべて同じサイズで丸くなります。


また、四方のうちのどれか1つの角を丸くしたいときは、個別に指定することもできます。


border-radiusで円を作る

border-radiusの値は%でも指定できます。ボックスを丸くして円にするには、値を50%にします。


値が50%ということは半径50%の円で切り取るということですが、何の50%かというと、widthやheightの50%になります。width・heightの半分の長さの半径を持つ円になるので、ボックスの中心と円の中心が一致し、円で切り取られることになります。

border-radiusで楕円を作る

上の例で円が正円になったのは、widthとheightが等しかったからです。つまり、楕円を作るには、widthとheightを違う値にすればOKです。例えば、横につぶれた円を作りたいときは、border-radiusを50%に保ったまま、widthをheightよりも大きくします。


反対に、縦長の円を作りたいなら、heightを大きくすればOKです。

四方それぞれの角を楕円で切り取る

border-top-left-radiusなどの個別のプロパティに値を2つ設定すると、それぞれの角を楕円で切り取ることができます。1つ目の値が切り取る円の横の半径、2つ目の値が縦の半径になります。


これを応用すればもっと自由でオシャレな図形が書けるので、いろいろ試してみるといいでしょう!