KAKERU Designing suetomi

丸い画像・好きな形の画像をCSSで作る｜つぶれない円の作り方と、コピペで使える5種類

丸い画像・好きな形の画像をCSSで作る。つぶれない円の作り方と、使う・使わないの判断

プロフィール写真を丸くする。実績の写真を六角形に並べる。写真のふちを、ふんわり消す。画像を加工しなくても、こうした形はCSSで作れます。元の画像は四角いままなので、あとから写真を差し替えても、同じ形のまま表示されます。

使いどころ

人の写真やアイコンなど「一つひとつの顔」を見せる画像は、丸くする。写真の中に文字や図がある画像、端まで大事な情報がある画像は、切れてしまうので形を変えない。

今回は、丸い画像、角を丸くした写真、葉っぱの形、六角形、ふちがふんわり消える丸の5種類を、コピペ用のコードつきで紹介します。

トミー

連載「WEBの技術」の14回目です。
今回は「画像の形」の回。丸くするだけなら1行ですが、横長の写真だと楕円につぶれる、というつまずきが必ず出てきます。その理由から説明します。

完成見本：5種類の形

同じ2枚のイラストを、CSSだけで5つの形に切り抜いています。下の小さな文字は、よく使う場所の例です。

CIRCLE1. 丸い画像プロフィール・スタッフ紹介
ROUNDED2. 角を丸くした写真ブログの一覧・カード
LEAF3. 葉っぱの形お店・サービスの紹介
CLIP-PATH4. 六角形実績・メンバーの一覧
MASK5. ふちがふんわり消える丸トップのイメージ・背景

※ 見本は見た目を見せるためのもので、読み上げソフトでは読まれないようにしています。中身はすぐ下のコードと同じです。

コピペ用のコード

5種類とも、最初に共通のCSSを入れ、そのうえで見本ごとのCSSを足します。共通のCSSは、各見本のコードの先頭にも入れてあります。HTMLの src には画像のURLを、alt には画像の内容を書きます。CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-shp は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

width と height には、元の画像の大きさを書いておきます。CSSで大きさを変えても、読み込み中に場所を確保できるので、画像が出たときにページがガタッとずれにくくなります。

1. 丸い画像

プロフィール写真などでいちばんよく使う形です。横長の写真でも、まず正方形に切りそろえてから、角を半分まで丸めて円にします。

HTML
<img class="kd-shp kd-shp-circle" src="画像のURL" alt="画像の内容（例：店主の写真）" width="1200" height="800">
CSS
/* 5種類に共通：画像を「ブロック」として置く */
.kd-shp {
  display: block;
  max-width: 100%;
  height: auto;
}
.kd-shp-circle {
  width: 160px;
  /* 縦横を1:1（正方形）にそろえる */
  aspect-ratio: 1;
  /* 写真をつぶさずに、はみ出た分を切る */
  object-fit: cover;
  /* 角を幅の半分まで丸める＝円になる */
  border-radius: 50%;
}

2. 角を丸くした写真

四角い写真の角を少しだけ丸めます。ブログの一覧やカードに並べると、やわらかい印象になります。比率もそろえておくと、写真の大きさがばらばらでも列がきれいにそろいます。

HTML
<img class="kd-shp kd-shp-round" src="画像のURL" alt="画像の内容（例：店主の写真）" width="1200" height="800">
CSS
/* 5種類に共通：画像を「ブロック」として置く */
.kd-shp {
  display: block;
  max-width: 100%;
  height: auto;
}
.kd-shp-round {
  width: 100%;
  /* 横3：縦2 にそろえる */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 16px;
}

3. 葉っぱの形

向かい合う2つの角だけを大きく丸めると、葉っぱのような形になります。角の丸みを角ごとに変えられる border-radius の書き方を使います。

HTML
<img class="kd-shp kd-shp-leaf" src="画像のURL" alt="画像の内容（例：店主の写真）" width="1200" height="800">
CSS
/* 5種類に共通：画像を「ブロック」として置く */
.kd-shp {
  display: block;
  max-width: 100%;
  height: auto;
}
.kd-shp-leaf {
  width: 170px;
  aspect-ratio: 1;
  object-fit: cover;
  /* 左上・右下を50%、右上・左下を0 */
  border-radius: 50% 0;
}

4. 六角形

角を丸めるだけでは作れない形は、clip-path（クリップパス：見せる範囲を形で切り抜く指定）を使います。6つの点を結んだ内側だけを見せて、六角形にします。

HTML
<img class="kd-shp kd-shp-hexagon" src="画像のURL" alt="画像の内容（例：店主の写真）" width="1200" height="800">
CSS
/* 5種類に共通：画像を「ブロック」として置く */
.kd-shp {
  display: block;
  max-width: 100%;
  height: auto;
}
.kd-shp-hexagon {
  width: 180px;
  /* 六角形がつぶれないよう、少し横長にする */
  aspect-ratio: 1.15;
  object-fit: cover;
  /* 左から時計回りに6つの点を結ぶ */
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

5. ふちがふんわり消える丸

まわりを、くっきり切らずに少しずつ透明にして、ふんわり消えるように見せます。黒いところだけを見せる「マスク」に、中心から外へ薄くなるグラデーションを使います。

HTML
<img class="kd-shp kd-shp-soft" src="画像のURL" alt="画像の内容（例：店主の写真）" width="1200" height="800">
CSS
/* 5種類に共通：画像を「ブロック」として置く */
.kd-shp {
  display: block;
  max-width: 100%;
  height: auto;
}
.kd-shp-soft {
  width: 200px;
  aspect-ratio: 1;
  object-fit: cover;
  /* 中心から55%までは見せて、71%で完全に透明にする */
  mask-image: radial-gradient(circle, #000 55%, transparent 71%);
}

仕組み：3つのやり方の違い

1. border-radius：角を丸める

border-radius は角を丸める指定です。数字が大きいほど丸みが大きくなり、50% にすると、角の丸みが幅と高さの半分ずつになります。正方形なら、4つの丸みがつながって円になります。

値を2つ書くと、1つ目が左上と右下、2つ目が右上と左下になります。3の葉っぱの形の 50% 0 は、「左上と右下だけを大きく丸め、ほかの2つは角のまま」という意味です。

2. aspect-ratio と object-fit：先に正方形にそろえる

丸くする前に大事なのが、画像の比率です。aspect-ratio: 1（アスペクト比：縦と横の比率）で、表示する枠を正方形にします。ただ、横長の写真を正方形の枠に入れると、そのままでは横からつぶれて表示されます。

そこで object-fit: cover を足します。写真の比率は保ったまま枠いっぱいに広げ、はみ出た部分を切る、という指定です。切るときは真ん中が残ります。人の顔が真ん中にない写真は、object-position: 50% 20%（横は真ん中・縦は上から20%の位置を残す）のように、残したい場所をずらせます。

3. clip-path と mask-image：好きな形で見せる

六角形のように、角を丸めるだけでは作れない形は clip-path を使います。polygon() に点の位置を並べると、その点を結んだ形の内側だけが見え、外側は見えなくなります。4の見本は、左上から時計回りに6つの点を結んでいます。

5の見本の mask-image（マスクイメージ）は、マスクの黒いところだけを見せ、透明なところを隠す指定です。マスクに、中心が黒く外へ行くほど透明になるグラデーションを使うと、ふちが少しずつ消えていくように見えます。clip-path は「見える・見えない」の2つだけですが、マスクは「半分だけ透ける」もできる、という違いがあります。

やり方向いている形気をつけること
border-radius円・角丸・葉っぱなど、丸みのある形円にするなら、先に正方形にそろえる
clip-path六角形・ひし形・斜めなど、直線で作れる形形の外は、影も枠線も見えなくなる
mask-imageふちをぼかした形薄くなった部分は、背景の色が透けて見える

MDNでは、ここで使った指定はどれも、主要なブラウザでそろって使える「Baseline」の広く使える段階と表示されています。一番新しい mask-image も、2023年12月からそろって使えるようになっています。

数値を変えるとどうなるか

丸くする手順（1の見本）

横長の写真に、手順を1つずつ足して並べました。

border-radius: 50% だけ
幅と高さをそろえただけ
object-fit: cover まで

border-radius: 50% だけだと、横長の写真は楕円になります。幅と高さを同じにしただけだと、円にはなりますが、中の絵が横からつぶれます。object-fit: cover まで入れて、はじめて「絵はそのまま・形は円」になります。丸い画像がゆがんで見えるときは、たいていこのどこかが抜けています。

角の丸み（2の見本）

4px
見本 16px
40px

4pxは、近くで見ると丸いと分かる程度で、きちんとした印象です。40pxだと、小さく表示したときに角が大きく欠け、写真の端の情報が見えにくくなります。カードに並べるなら、見本の16px前後が、やわらかさと写真の見やすさのバランスがとれます。ボタンや枠の角の丸みと数字をそろえておくと、ページ全体がまとまって見えます。

変えるところ小さくすると大きくすると
角の丸み（border-radius）きちんとした印象やわらかいが、写真の角が欠ける
ふちが消え始める位置（mask の 55%）ぼけている部分が広くなるくっきりした丸に近づく
残す位置（object-position）0% で左・上の端を残す100% で右・下の端を残す

スマホと、見る人への配慮

画像の意味は、形を変えても同じ

形を変えても、読み上げソフトに伝わる中身は変わりません。人の写真や商品の写真など、意味のある画像には、alt に内容を書きます。W3Cの基準（WCAG 2.2）にも、意味のある画像には代わりの文字を用意する、という項目があります。飾りとして置くだけの画像なら、alt=""（空）にすると、読み上げソフトが読み飛ばします。

切った外側は、影も枠線も消える

clip-path で切ると、形の外側は何も見えなくなります。box-shadow（ボックスシャドウ：四角い影）を付けても、外側にある影は消えます。形に沿った影を付けたいときは、画像を div などで包み、包んだ側に filter: drop-shadow(0 6px 12px rgba(0,0,0,.2)) を付けます。drop-shadow は、見えている形に沿って影を付ける指定です。

画像をリンクにするときも同じで、リンク（a）そのものを clip-path で切ると、キーボードで選んだときに出る枠線まで消えることがあります。切るのは中の画像だけにして、リンクの枠線は残します。

スマホでは、小さくなっても形が分かるか

六角形やふちをぼかした形は、スマホで小さく表示すると、形が分かりにくくなります。小さく並べる場所では、円や角丸のような単純な形のほうが伝わります。また、幅を 160px のように決めた見本は、親の箱が狭いときに max-width: 100% で縮むようにしてあります。

やりすぎ注意

円・六角形・葉っぱをページの中で混ぜると、形のほうが目立って、写真の中身が入ってきにくくなります。1ページの中で使う形は、人の写真は円、それ以外は角丸、のように役割で1〜2種類に決めておくと、ページがまとまります。

トミー

形を変えるのは、写真を「目立たせる」ためより、「同じ種類のものだと分かってもらう」ためだと考えています。
スタッフは丸、実績は角丸。形がそろっているだけで、ページが読みやすくなります。

AIに頼むなら

この切り抜きは、Claudeなどの生成AIに頼んでもすぐ作ってもらえます。そのときは、形・大きさ・元の写真の比率・どこに使うかまで、まとめて伝えると、手直しが少なく済みます。

スタッフ紹介の写真（元は横長 1200×800）を、幅160pxの丸に切り抜きたい。
画像は加工せずCSSだけで。写真がつぶれないよう object-fit: cover を使い、顔が上寄りなので残す位置も上に寄せて。
alt にはスタッフの名前を入れる前提で。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • 横長・縦長の写真に差し替えても、つぶれないか。見本の正方形の画像でだけ確かめると、object-fit の入れ忘れに気づけません。比率の違う写真で試します
  • 顔や大事な部分が切れていないか。円や六角形は角が大きく切れます。人の写真なら、頭や顔が欠けていないかを見て、必要なら object-position で残す位置を直します
  • alt が空のままになっていないか。AIの見本は alt="" で返ってくることがあります。意味のある写真なら、内容を書き足します

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • スタッフ紹介・代表あいさつ・お客様の声の写真。人の写真は丸くすると、「この人」という単位で見てもらいやすくなります。KAKERUで一番よく使うのは、この円です
  • ブログの一覧やカード。角を少しだけ丸め、比率を3:2などにそろえます。写真の大きさがばらばらでも、一覧がきれいにそろいます
  • お店やサービスの雰囲気を見せる1枚。カフェ・美容・子ども向けなど、やわらかさを出したいサイトで、葉っぱの形やふちのぼかしをトップの1か所だけに使います

使わない場面

  • 文字や図が入った画像。チラシ・料金表・図解などは、角を切ると情報が欠けます。四角のまま見せます
  • 商品の写真。形や色をきちんと見てほしい商品は、切り抜くと全体が分からなくなります。角を少し丸める程度にとどめます
  • 六角形などの凝った形を、たくさん並べる場所。形が目立って写真の中身が入ってきにくくなり、スマホでは形も分かりにくくなります
トミー

「おしゃれだから六角形」ではなく、「人の写真だから円」「一覧だから角丸」。
形は、何の画像かで決めるものです。

まとめ

  • 円は border-radius: 50%。ただし先に aspect-ratio: 1 と object-fit: cover で正方形にそろえる
  • 角丸は border-radius の数字だけ。ボタンや枠と丸みをそろえると、ページがまとまる
  • 値を2つ書くと、向かい合う角ごとに丸みを変えられる（葉っぱの形）
  • 直線で作れる形は clip-path: polygon()。外側は影も枠線も消えるので、影は包んだ側に drop-shadow で
  • ふちをぼかすなら mask-image ＋ radial-gradient
  • 意味のある画像には alt を書く。文字や図が入った画像は形を変えない

まずは1の「丸い画像」のコードをコピーして、プロフィールやスタッフの写真を1枚、丸くしてみてください。横長の写真でも、ゆがまずに円になるのが分かります。

参考にした資料

いずれも2026年10月19日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

画像に乗せるとズームする動きをCSSだけで コピペで使える5種類と、まわりを崩さない書き方
関連記事画像に乗せるとズームする動きをCSSだけで｜コピペで使える5種類と、まわりを崩さない書き方
画像の上の文字を読みやすくするCSSの重ね方 コピペで使える5種類と、写真が替わっても読める濃さ
関連記事画像の上の文字を読みやすくするCSS｜コピペで使える5種類と、写真が替わっても読める濃さ
斜めの背景・波の背景をCSSで作る。コピペで5種類と、使う・使わないの判断
関連記事斜めの背景・波の背景をCSSで作る｜コピペで使える5種類と、使う・使わないの判断
丸い画像・好きな形の画像をCSSで作る。つぶれない円の作り方と、使う・使わないの判断

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA