プロフィール画像やアイコンを丸く表示したいと思ったことはありませんか？
CSSのborder-radiusを使えば、画像を簡単に円形にすることができます。
本記事では、画像を丸く見せるための基本テクニックと、見た目を整えるコツをわかりやすく紹介します。

border-radiusとは？

border-radiusは、HTML要素の角を丸くするためのCSSプロパティです。
数値や割合を指定することで、角を少しだけ丸くしたり、完全な円形にすることができます。

画像を円形にする基本の方法

次のように、画像にborder-radius: 50%;を指定することで、画像を丸く表示できます。

<img src="example.jpg" class="circle-image" alt="プロフィール写真">

.circle-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

ポイント解説

• widthとheightを同じ値（＝正方形）に設定すること
• border-radius: 50%;で円形に
• object-fit: cover;で画像を歪ませずに中央トリミング

枠線や影をつけて装飾する

円形画像は、見た目が単調になりがちです。borderやbox-shadowを加えると、より目立つデザインになります。

.circle-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

影の色や枠線の太さは、サイトの雰囲気に合わせて調整しましょう。

よくある失敗例と対処法

• 画像が楕円になる → 横幅と高さが不一致のままborder-radius: 50%を適用している可能性があります。正方形にしましょう。
• 画像が引き伸ばされる → object-fit: cover;を忘れずに指定します。
• 枠線だけ丸くならない → 親要素でなく<img>タグ自体にborder-radiusをつけてください。

応用：ホバーでアニメーションを加える

ユーザーが画像の上にマウスを乗せたときに、少し拡大する演出をつけるとインタラクティブになります。

.circle-image {
  transition: transform 0.3s ease;
}

.circle-image:hover {
  transform: scale(1.05);
}

ちょっとした動きがあるだけで、より現代的な印象になります。

まとめ

• border-radius: 50%で画像をまん丸にできる
• 画像は正方形＋object-fit: coverで整える
• 枠線や影をつければより洗練されたデザインに
• ホバーで拡大などの演出も可能

おわりに

CSSだけでアイコンやプロフィール画像を美しく丸く表示することができるborder-radiusは、初心者にもおすすめのプロパティです。
Webサイトの印象をぐっとよくしてくれるテクニックなので、ぜひいろいろな場面で活用してみてください。

次回は、「画像の角を少しだけ丸くする方法」や「円形画像に文字を重ねる方法」など、さらに発展的な表現も紹介予定です！