CSS・見た目をもっと自由に

角をまるくして、やわらかく

border-radiusで角を丸くする方法。数字の大きさによる丸みの違い、50%でまんまるにするやり方、ボタンらしく見せる角丸、角ごとに違う丸みをつける書き方を、実際の表示で確かめながら学びます。

書いた人：わーゆ

四角い部品の角を、ほんの少しまるめる。たったそれだけで、かたい印象がやわらいで、今どきの見た目になります。ボタンやカードがやさしく見えるのは、たいていこの角のまるみのおかげ。あやつるのはborder-radiusです。

書いてみよう

.card {
  border: 2px solid teal;
  border-radius: 12px;
}

枠線に、border-radius: 12px;を一行たすだけ。四角い枠の角が、やわらかくまるまります。数字を4px 20pxと変えれば、まるみの度合いも変わります。小さくすればきりっと、大きくすればふんわり。

数字ごとの角の変化を、並べて見てみましょう。

数字が大きいほど角がまるく。999pxのように大きすぎる数字を入れると、両端が完全な半円のピル型になります。

数字を大きくすると、まんまるに

まるみをうんと大きく、50%にすると、なんとまんまるになります。丸いアイコンやプロフィール画像でよく使う手です。

.avatar {
  width: 80px;
  border-radius: 50%;
}

正方形の部品をborder-radius: 50%;にすると、きれいな円に。

同じ正方形が、50%でどう変わるか見てみましょう。

同じ正方形でも、50%にすると角が全部消えてまんまるに。widthとheightがそろっているのが、きれいな円のコツです。

ボタンらしく：まんまるの角＋クリックできる合図

角のまるみをうんと大きくすると、四角いボタンがピル（カプセル）型になります。ここにcursor: pointer;を添えると、マウスを乗せたときに指カーソルへ変わり、「押せますよ」という合図がひとつ増えます。

.btn {
  border-radius: 999px;
  cursor: pointer;
}

999pxのように確実に大きすぎる数字を指定すると、どんな大きさの部品でも両端が完全な半円になり、ピル型に仕上がります。

角ごとに違うまるみにする

border-radiusは、実は4つの角を別々に指定することもできます。数字を4つ並べると、左上→右上→右下→左下の順で効きます。

.tab {
  border-radius: 12px 12px 0 0;
}

上の2つの角だけまるく、下は直角のまま。ふせんやタブ、吹き出しのような形が作れます。1つの数字だけなら4隅すべてに同じまるみ、4つ並べれば角ごとに変えられる、と覚えておきましょう。

数字の並べ方を変えると、形がどう変わるか見てみましょう。

数字の並べ方しだいで、上だけまるいタブや、対角だけまるい形も。左上→右上→右下→左下の順で効きます。

このレッスンのまとめ

  1. 角のまるみはborder-radius
  2. 数字が大きいほどまるく、50%でまんまる
  3. 部品には8px〜16pxくらいが上品
  4. border-radius: 999px;でピル型に、cursor: pointer;で押せる合図を

やってみよう：カード・写真・ボタンを丸める

.cardに角丸を、しまちゃんの写真に円形を、「おくる」ボタンにピル型をつけましょう。ボタンには新しくclass="btn"をつけます。

<button type="submit" class="btn">おくる</button>
.card {
  border: 1px solid #e9e3d9;
  border-radius: 28px;
}
figure img {
  border-radius: 50%;
}
.btn {
  border-radius: 999px;
  cursor: pointer;
}

.cardは四角い箱がやわらかい角丸カードに、しまちゃんの写真は正方形の画像がきれいな円に、ボタンは左右が半円のピル型になります。

ブラウザ表示。白いカードの角が丸くなり、しまちゃんの写真がまんまるに、「おくる」ボタンが左右まるいピル型になっている
角がまるくなるだけで、ページ全体がやわらかい印象になります。

角がまるくなったら、最後にもう一手間。影をつけて、カードをふわっと浮かせてみましょう。

よくある質問

border-radiusで指定した数字より、まるみが小さく見えるのはなぜ？
要素の高さより大きい数字を指定しても、それ以上まるくはならず頭打ちになるからです。カプセル型にしたいときは、高さの半分より確実に大きい数字（例：999px）を指定すれば十分です。
角ごとに別々のまるみにできる？
できます。border-radius: 12px 12px 0 0;のように4つの数字を左上→右上→右下→左下の順で並べると、上の角だけ丸く下は直角の「タブ」のような形も作れます。
border-radius: 50%で円にならないときは？
要素が正方形（widthとheightが同じ）でないと、円ではなく楕円になります。プロフィール画像などきれいな円にしたいときは、まずwidthとheightを同じ数値にそろえましょう。