角丸の組み合わせで作る形｜border-radiusで葉っぱ・しずく・札・ふんわりした形、コピペ4種類と使いどころ

角を丸くする border-radius。ボタンやカードの角を少し丸める指定として知られていますが、4つの角の丸さを別々に決めると、葉っぱやしずくのような形も作れます。画像を用意しなくても、CSSの数行で済む形があります。

使いどころは、小さな飾りや札のように、形が単純で数が少ないところです。星やギザギザのように直線の角が多い形や、ロゴのように形を正確に守りたいものには使わず、clip-path やSVG（線や形を数字で描く画像）を選びます。

この記事の要点

border-radius の値を角ごとに変えると、葉っぱ・しずく・札・ふんわりした形を、画像なしで作れる
使いどころは、小さな飾りや短い札、写真をやわらかく見せたいところ。星のように角が多い形やロゴは clip-path や SVG に任せる
丸さの合計が辺の長さを超えると全部の角が縮むので、999px の使い方に注意する。背景色だけの形は、強制カラーモードで消えないように枠線を用意する

連載「WEBの技術」の44回目です。
今回は角丸の組み合わせ。いつもの border-radius で、4つの形を作ります。

完成見本：角丸で作る形4種類

どの形も、使っている中心の指定は border-radius です。しずくだけ、最後に要素を回しています。

0 100%1. 葉っぱ自然や環境をテーマにしたサイトの小さな飾り

0 50% 50% 50% ＋ ROTATE2. しずく水まわりや、うるおいを伝えるページの飾り

1.25EM .4EM .4EM 1.25EM3. 札（タグ）カテゴリーの名前や、商品の「セール」などの短い札

8 VALUES4. ふんわりした形人物や商品の写真を、やわらかい雰囲気で見せるとき

※ 見本は読み上げソフトでは読まれないようにしています。実際に使うときは、4のように内容のある画像には内容を表す alt を付けます。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-rd は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

1. 葉っぱ

値を2つ書くと、1つ目が「左上と右下」、2つ目が「右上と左下」になります。0 100% なら、左上と右下がとがり、右上と左下が大きく丸くなって、葉っぱの形になります。

HTML

<div class="kd-rd-leaf"></div>

CSS

.kd-rd-leaf {
  width: 120px;
  height: 120px;
  background: #15803D;
  /* 左上と右下は0、右上と左下は100% */
  border-radius: 0 100%;
}
/* 強制カラーモードでは背景色が消えるので、枠線で形を残す */
@media (forced-colors: active) {
  .kd-rd-leaf {
    border: 2px solid CanvasText;
  }
}

2. しずく

値を4つ書くと、左上から時計回りに、左上・右上・右下・左下の順です。左上だけを0にして、残りを 50% にすると、1つの角だけがとがった丸になります。あとは transform: rotate(45deg)（45度回す指定）で、とがった角を真上に向けます。

HTML

<div class="kd-rd-drop"></div>

CSS

.kd-rd-drop {
  width: 96px;
  height: 96px;
  /* 回すと角が箱の外へ約20px出るので、まわりをあける */
  margin: 20px;
  background: #0284C7;
  /* 左上だけとがらせて、残りの3つを丸くする */
  border-radius: 0 50% 50% 50%;
  /* 45度回すと、とがった角が真上に来る */
  transform: rotate(45deg);
}
@media (forced-colors: active) {
  .kd-rd-drop {
    border: 2px solid CanvasText;
  }
}

3. 札（タグ）

左の2つの角を高さの半分（高さ 2.5em の半分で 1.25em）にすると、左端が半円になります。右の2つの角は小さく丸めるだけです。穴は ::before（要素の前に足す飾り）で描いた白い丸で、文字はHTMLにそのまま書きます。

HTML

<span class="kd-rd-tag">セール</span>

CSS

.kd-rd-tag {
  position: relative;
  display: inline-block;
  height: 2.5em;
  padding: 0 1.2em 0 2.2em;
  background: #0369A1;
  color: #FFFFFF;
  font-weight: 700;
  line-height: 2.5em;
  white-space: nowrap;
  /* 左の角は高さの半分、右の角は小さく */
  border-radius: 1.25em .4em .4em 1.25em;
}
.kd-rd-tag::before {
  /* ひもを通す穴に見える白い丸 */
  content: "";
  position: absolute;
  left: .9em;
  top: 50%;
  width: .625em;
  height: .625em;
  margin-top: -.3125em;
  background: #FFFFFF;
  border-radius: 50%;
}
@media (forced-colors: active) {
  .kd-rd-tag {
    border: 1px solid CanvasText;
  }
  .kd-rd-tag::before {
    border: 1px solid CanvasText;
  }
}

4. ふんわりした形

スラッシュ（/）を入れると、横の丸さと縦の丸さを別々に決められます。前の4つが横、後ろの4つが縦で、合わせて8つの値です。<img> に直接指定すると、画像そのものがこの形に切り抜かれます。object-fit: cover（枠いっぱいに、比率を保って切り抜く指定）で画像がゆがまないようにしています。

HTML

<img class="kd-rd-blob" src="画像のURL" alt="画像の内容" width="1200" height="800">

CSS

.kd-rd-blob {
  width: 200px;
  height: 200px;
  object-fit: cover;
  /* スラッシュの前が横の丸さ、後ろが縦の丸さ */
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

仕組み：丸さは角ごとに決められる

値は左上から時計回り

border-radius は、値の数で意味が変わります。1つなら4つの角すべて、2つなら「左上と右下」「右上と左下」の斜めの組、4つなら左上・右上・右下・左下の順です。

30px：4つとも同じ

30px 0：斜めの組ごと

0 15px 30px 44px：1つずつ

葉っぱは2つの書き方、しずくと札は4つの書き方です。形を考えるときは、「どの角をとがらせて、どの角を丸くするか」を先に決めると、値が決まります。

スラッシュの前は横、後ろは縦

角の丸みは、円だけでなく楕円（つぶれた円）の一部にもできます。スラッシュの前に横の丸さ、後ろに縦の丸さを書くと、角ごとに違う楕円になります。4の見本は、次のように角ごとの横と縦を組にして読みます。

角	横の丸さ	縦の丸さ
左上	60%	60%
右上	40%	30%
右下	30%	70%
左下	70%	40%

% は箱の幅と高さが基準

MDNによると、横の丸さの % は箱の幅、縦の丸さの % は箱の高さが基準です。そのため、同じ 0 100% でも、箱の形が変わると葉っぱの形も変わります。

正方形（見本）

横長の箱

縦長の箱

丸さを px で書くと、箱の大きさを変えたときに形がくずれます。形を保ったまま大きさを変えたいものは % で書きます。

大きすぎる値は、全部の角を縮める

角を完全に丸くしたいときに 999px と書くことがあります。ここに落とし穴があります。W3Cの仕様では、隣り合う角の丸さの合計が辺の長さを超えると、すべての角を同じ割合で小さくすると決まっています。

高さ40pxの札の左の2つの角を999pxにすると、左の辺の合計は1998pxで、辺の長さの約50倍です。すると、右の角に指定した小さな丸さも約50分の1になり、ほとんど四角に見えます。札の見本で 999px ではなく、高さの半分の 1.25em を使っているのはこのためです。

999px：右の角まで四角に

1.25em：左が半円、右は小さく丸い（見本）

全部 .4em：ふつうの札

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

葉っぱの丸さ（1）

0 30%

0 60%

0 100%（見本）

100% に近づくほど、辺のまっすぐな部分がなくなり、とがった葉っぱになります。60% くらいだと、葉っぱというより「角の丸い四角」に見えます。葉っぱに見せたいなら、100% が分かりやすい形です。

しずくを回す（2）

回さない

45度回す：しずく（見本）

左下をとがらせて-45度：地図のピン

回さないと、ただの1つだけ角がある丸です。とがらせる角と回す向きを変えると、同じ作り方で地図のピンのような形にもなります。回すと角が箱の外へ出ます。96pxの正方形の場合、対角線の半分は約68pxで、箱の半分の48pxより約20px長いので、見本では margin: 20px で場所をあけています。

ふんわりした形の値（4）

スラッシュなし：直線が残る

合計100%（見本）

値の差が大きい：絵が切れる

見本の値は、横の丸さが上の辺で60%＋40%、下の辺で30%＋70%、縦の丸さが左の辺で60%＋40%、右の辺で30%＋70%と、どの辺も合計が100%になっています。こうすると辺にまっすぐな部分が残らず、ひとつながりの曲線になります。スラッシュをなくすと（左）、上・右・下の辺に直線が残ります。値の差を大きくしすぎると（右）、形がとがり、絵の端が大きく切れます。

形	基本の値	変えるところ
葉っぱ	0 100%	葉の向きは 100% 0 で左右が入れかわる
しずく	0 50% 50% 50%	rotate の角度で向きを変える
札	高さの半分小小高さの半分	高さを em で決めて、丸さも em で
ふんわりした形	横4つ / 縦4つ	辺ごとの合計を100%にそろえる

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

押せる範囲も、丸く小さくなる

W3Cの仕様では、クリックできる範囲も角の曲線に沿うと書かれています。葉っぱやしずくの形をそのままボタンにすると、見た目の四角よりも押せる場所が狭くなります。仕様でも、押せるものが小さくなりすぎないよう注意を促しています。押せるものに形を付けるときは、大きめの四角いリンクの中に飾りとして置くほうが安全です。

強制カラーモードでは、背景色の形が消える

Windowsの設定などで画面の色を決まった配色に変える「強制カラーモード」では、MDNによると、background-color が決まった色に置きかわります。背景色だけで描いた葉っぱやしずくは、ページの背景と同じ色になって見えなくなります。1〜3のコードでは @media (forced-colors: active) の中で枠線を足しました。枠線は角の丸さに沿うので、形が残ります。Chromeの強制カラーの再現で確かめました。4の画像はそのまま表示されました。

文字は、形に合わせて折り返らない

border-radius で変わるのは箱の見た目だけで、文字の並びは四角い箱のままです。葉っぱやしずくの中に文章を入れると、文字が角から外へはみ出して見えます。形の中に入れるのは、短い言葉やアイコンまでにします。しずくの場合は文字も一緒に回るので、なおさら向きません。

形だけで意味を伝えない

葉っぱの形が「環境に配慮した商品」を意味していても、形だけでは読み上げソフトに伝わりません。意味を伝えたいものは、札のように文字で書きます。形は飾りとして、文字の意味を邪魔しない使い方にします。

やりすぎ注意

1ページの写真を全部ふんわりした形にすると、どれも同じ印象になり、形の効果がなくなります。写真の大事な部分が切れることもあるので、人の顔や商品が端に寄っている写真には使いません。

形は、ページの中で1か所か2か所だから目に留まります。
増やすほど効果が薄くなるので、置く場所を先に決めるのがおすすめです。

AIに頼むなら

こうした形は、Claudeなどの生成AIに頼むとすぐ作ってもらえます。そのときは、形の名前だけでなく、大きさの決め方と使う場所まで伝えると、そのまま使いやすいコードになります。

カテゴリーの札をCSSで作って。左端が半円で、ひもを通す穴があり、右の角は小さく丸い形にして。
文字の大きさが変わっても形がくずれないように、高さと丸さは em で指定して。
強制カラーモードでも形と穴が見えるようにして。

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

999px や 100% の組み合わせで、ほかの角まで縮んでいないか。小さく丸めたはずの角が四角くなっていたら、丸さの合計が辺の長さを超えています
文字の長さを変えても形が保たれるか。px で固定されていると、札の文字が増えたときや、2行になったときに形がくずれます
強制カラーモードで形が残るか。背景色だけで描いた形は消えるので、枠線の指定があるかを見ます

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

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

使う場面

カテゴリーや「セール」などの短い札。画像にせず文字のまま作れるので、あとから言葉を変えるのも簡単です
見出しのそばや、余白に置く小さな飾り。画像を増やさずに済むので、数が少ない飾りならCSSで十分です
人物写真や商品写真を1枚だけ、やわらかく見せたいとき。四角い写真が続くページで、1枚だけ形を変えると流れに変化が付きます

使わない場面

ロゴやブランドの決まった形。角丸は近い形しか作れません。形を正確に守るものは、SVGの画像を使います
星やギザギザなど、角が多い形。角丸で変えられるのは4つの角だけです。こうした形は clip-path で切り抜きます
大事なボタンの形。押せる範囲が狭くなり、ボタンに見えにくくなるので、ふつうの角丸にとどめます

KAKERUなら、作る前に「この形はCSSの4つの角で足りるか」を考えます。
足りなければ、無理に数字を調整せず、SVGに切りかえたほうが早いと判断します。

まとめ

border-radius は角ごとに丸さを決められる。値は左上から時計回り、2つなら斜めの組
スラッシュの前が横、後ろが縦の丸さ。% は箱の幅と高さが基準
丸さの合計が辺の長さを超えると、全部の角が同じ割合で縮む。999px は小さな角までつぶすことがある
ふんわりした形は、辺ごとの合計を100%にそろえると、ひとつながりの曲線になる
背景色だけの形は強制カラーモードで消えるので枠線を足す。ロゴや角の多い形は SVG や clip-path に任せる

まずは1のコードをコピーして、0 100% を 100% 0 や 0 60% に変えてみてください。数字と形の関係がすぐ分かります。

参考にした資料

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

MDN「border-radius」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-radius
※値が1〜4つのときの順番、スラッシュの前が横で後ろが縦の丸さ、%は箱の幅と高さが基準。Baseline は Widely available（2015年7月から主なブラウザで使える）
W3C「CSS Backgrounds and Borders Module Level 3」Overlapping Curves（英語）
https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
※隣り合う角の丸さの合計が辺の長さを超えると、すべての角が同じ割合で縮むこと
W3C「CSS Backgrounds and Borders Module Level 3」Corner Clipping（英語）
https://www.w3.org/TR/css-backgrounds-3/#corner-clipping
※背景やはみ出した中身が曲線で切られること、クリックできる範囲も曲線に沿うこと、押せるものは小さくなりすぎないよう注意すること
MDN「forced-colors」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors
※強制カラーモードでは background-color や border-color が決まった色に置きかわること
MDN「object-fit」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit
※cover で比率を保ったまま枠いっぱいに表示すること
MDN「rotate()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/rotate
※要素を回す指定