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

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

四角い角をちょっとまるめるだけで、印象はぐっとやわらかく。border-radiusで角丸やまんまるを作ろう。

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

書いてみよう

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

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

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

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

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

正方形の部品を border-radius: 50%; にすると、きれいな円に。四角が丸くなる瞬間は、CSSのちょっとした魔法のようで、いちばん”変わった！“を感じられるところです。

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

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

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

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

このレッスンのまとめ

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

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