border-radiusは角を丸くするCSS

2020年12月23日

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

丸くしたい角をtop-left（左上）やtop-right（右上）などで指定したのち、「水平方向の半径」と「垂直方向の半径」の二つの値を指定することで丸くすることができます。

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」を使用すれば一括でまとめて記述することもできます。

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

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のショートハンドと同様、３つのみ、２つのみでも記述することができますが、paddingの「上・下」をborder-radiusでは「左上・右下」の対角線上で考え、paddingを左に傾けて「＋ → ×」で考えればよいと思います。

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

正円にするには「border-radius: 50%;」を指定する

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の値は同じでも、線が太い場合には正円になりません。

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

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

border-radius: 50%;コピー

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

■border-radius: 200px;

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

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

プロフィール画像を丸くするには<imgタグに「border-radius: 50%;」を指定

プロフィールの画像を丸くするには、画像の<imgタグに対して、正円の「border-radius: 50%;」を指定します。

例えば、以下のような画像を掲載していたとします。

<img src="profile.svg" width="300" height="300">

この<imgタグに、以下のように「border-radius: 50%;」を指定します。

<img src="profile.svg" width="300" height="300" style="border-radius: 50%;">コピー

すると、このように丸く切り抜いたような形で表示されます。

ただし、実際に画像が丸く切り抜かれたわけではなく、角が丸く表示されているだけです。

実際には、class属性などを設定して、以下のようにCSSで指定しておくとよいでしょう。

HTML:

<img src="profile.svg" alt="プロフィール画像" width="300" height="300" class="sample">コピー

CSS:

.sample {border-radius: 50%;}コピー

もしくは、Photoshopなどの画像編集ツールを使用して画像自体を丸く編集し、背景を透明に設定するのでもよいと思います。