枠線の角を丸くする「border-radius」

CSSで枠線の角を丸める際は「border-radius」を使用します。

丸くしたい角を指定したのち、「水平方向の半径」と「垂直方向の半径」の二つの値を指定することで丸くすることができます。

border-上下-左右-radius:「水平半径」 「垂直半径」;

例えば、左上の角だけを丸くする場合、「border-top-left-radius: 100px 50px;」のように指定します。そうすることで、以下のように左上(top-left)の角において、水平半径が100px、垂直半径が50pxの楕円の丸みを帯びた角になります。

この場合、枠線の太さが20pxありますが、この枠線も含めた外側の境界で適用されます。

それぞれの角を個別に指定する場合は以下のようになります。

border-top-left-radius(左上)
border-top-right-radius(右上)
border-bottom-right-radius(右下)
border-bottom-left-radius(左下)

例えば、「左上」と「右上」のみ、以下のように指定したとします。

.sample {
border: 4px #000 solid;
border-top-left-radius: 50px 50px;
border-top-right-radius: 50px 50px;
}

すると、「左上」と「右上」の角で丸みを帯びて表示されます。

このように、それぞれの角を個別にひとつづつ指定していけば、簡単に設定することができます。

一方、「border-radius」を使用すれば一括でまとめて記述することもできます。

「border-radius」で4つの角をまとめて書く方法

単に「border-radius」と記述した場合、「左上」、「右上」、「右下」、「左下」の順序で4つの角をスラッシュ「/」で分けてまとめて指定することができます。

border-radius:「左上・水平」「右上・水平」「右下・水平」「左下・水平」 / 「左上・垂直」「右上・垂直」「右下・垂直」「左下・垂直」;

例えば、以下のように書いたとします。

border-radius: 20px 40px 60px 80px / 40px 20px 30px 40px;

この場合、左上の角は「水平方向に20px、垂直方向に40pxの楕円」になり、右上なども同様ですが、それぞれ以下のように角が丸く表示されます。

ちなみに、これは以下と同じ意味になります。

.sample {
border-top-left-radius: 20px 40px;
border-top-right-radius: 40px 20px;
border-bottom-right-radius: 60px 30px;
border-bottom-left-radius: 80px 40px;
}

また、水平と垂直の半径が同じ値の場合は円になりますが、この場合はスラッシュなしでひとつにまとめて書くことができます。

border-radius:「左上・水平と垂直」「右上・水平と垂直」「右下・水平と垂直」「左下・水平と垂直」;

border-radius: 20px 40px 60px 80px;

そのため、これは以下と同じ意味になります。

border-radius: 20px 40px 60px 80px / 20px 40px 60px 80px;

さらに、水平垂直のほか、上下左右もすべて同じ値の場合、一括でひとつにまとめて書くことができます。

border-radius:「全ての角の水平と垂直の半径」;

例えば、「border-radius: 50px 50px 50px 50px;」の場合、単に「border-radius: 50px;」と書くことができます。

border-radius: 50px;

この場合は水平、垂直方向ともに半径50px(直径100px)の円で丸みを帯びた角になります。

加えて、paddingのショートハンドと同様、3つのみ、2つのみでも記述することができますが、paddingの「上・下」をborder-radiusでは「左上・右下」の対角線上で考え、paddingを左に傾けて「+ → ×」で考えればよいと思います。

そのほか、pxではなく、パーセンテージでも指定できますが、パーセンテージの場合は枠線の太さも考慮に入れた上での何%かで半径を指定します。

border-radiusで正円にする方法

border-radiusの値を大きくしていくと正円にすることができます。

例えば、幅200px、高さ200pxの<div>要素があったとします。

この<div>に「border-radius: 30px;」を指定すると角が少し丸くなります。

border-radius: 30px;

さらに「border-radius: 50px;」を指定するともっと丸くなりました。

border-radius: 50px;

これは上記のとおり、それぞれの角が「水平、垂直方向ともに半径50px(直径100px)の円」で丸くなります。

上記の状態からさらに値を大きくして、「border-radius: 90px;」、「border-radius: 100px;」、「border-radius: 200px;」などと値を増やしていった場合、最終的には正円となり、それ以降は<div>の幅を超えた値を指定しても変わらなくなります。

border-radius: 90px;

この場合は「border-radius: 90px 90px 90px 90px;」の意味となり、それぞれの角が半径90px(直径180px)の円の丸みを帯びて表示されます。

border-radius:100px;

さらに値を大きくすると、この場合は角がなくなり、ほぼ円になります。こちらは「border-radius: 100px 100px 100px 100px;」の意味となり、半径100px(直径200px)の円の丸みになります。

元々の<div>の幅が200px、高さが200pxのため、直径200pxの円とほぼ合致しましたが、枠線の幅の分もカウントする必要があるため、この場合は微妙にずれています。

枠線が細ければ無視できますが、このまま枠線の幅を40pxに太くするとずれが大きくなります。

border-radiusの値は同じでも、線が太い場合には円になりません。

きっちりと正円にするには、枠線の太さもカウントした上で、幅と高さに対して半分の値で半径を指定する必要があります。

この場合、単に「border-radius: 50%;」と指定すれば、線の太さに関わらず正円になります。

また、これ以降、<div>を超えた値のborder-radiusを指定しても変化はありませんでした。

border-radius: 200px;

この場合は「border-radius: 200px 200px 200px 200px;」の意味となり、元々の<div>の幅を超えるためか、これ以上の値を指定しても角の丸みに変化はありません。

以上のように、border-radiusを指定する際は枠線の太さも考慮に入れて指定することをおすすめします。