「このボタンの角、丸じゃなくて斜めに削いだ形にできますか」——受託の制作現場では、デザイナーが作ったカンプの細かな角の表現を、どう実装に落とすかで毎回悩みます。border-radius で作れるのは「丸い角」だけ。斜めに削いだ角（面取り）、内側にえぐれた角、星形のような角を再現しようとすると、これまでは背景画像や SVG、あるいは複雑な clip-path を持ち出すしかありませんでした。その結果、角の形を変えるたびに画像を差し替え、レスポンシブでサイズが変わると角がぼやけ、ボタンの色を変えたいだけなのに画像の作り直しが発生する——「角の形」がそのまま保守コストになっていく。
この長年の制約を外すのが、CSS の corner-shape プロパティです。Smashing Magazine が 2026 年 3 月に整理した Beyond border-radius: corner-shape（Smashing Magazine） のとおり、corner-shape は border-radius で確保した「角の領域」を、丸以外の形に変える新しい仕組みです。本記事では、受託で「画像に頼らず、軽く・崩れにくいブランド表現」を作る道具として corner-shape をどう使うか、そしてどこで気をつけるべきかを、制作の立場から整理します。
なぜ画像やclip-pathでの角の表現が負債になるのか
カンプどおりの角を再現するために、これまで現場が取ってきた手段は、どれも後で効いてくる負債を抱えています。
ひとつは、背景画像での再現です。角を削いだ枠を画像にすると、ボタンの幅が変わるたびに画像が伸びて角が歪み、高解像度ディスプレイでぼやけます。色違いのバリエーションを増やすたびに画像が増え、デザイン変更のたびに作り直しになる。
ふたつめは、clip-path での切り抜きです。clip-path: polygon(...) で角を削ぐことはできますが、座標を要素サイズに合わせて手で計算する必要があり、レスポンシブで破綻しやすい。さらに clip-path は要素を切り抜くため、box-shadow や outline が一緒に切り取られてしまい、影を付けたいときに別の工夫が要ります。
みっつめは、保守の属人化です。角の形が画像や複雑な座標計算に閉じ込められていると、次の担当者が「角を少し変えたい」だけで全体の作り直しを迫られる。受託では、この「触ると壊れる装飾」がそのまま保守見積もりを押し上げます。
corner-shape は、この三つを軽くします。角の形を CSS の宣言として持たせるため、要素のサイズや色が変わっても角が追従し、画像の差し替えが要らない。box-shadow や枠線とも自然に共存します。CSS の新機能を「振る舞いを宣言に寄せる」道具として使う発想は、CSS offset-path でJSなしの動きを作る記事で扱った方針の延長線上にあります。
corner-shape の基本 — 「角の領域」と「その埋め方」で考える
corner-shape を理解する鍵は、border-radius と corner-shape の役割分担です。border-radius が「角からどれだけの範囲を角丸の領域にするか（半径）」を決め、corner-shape が「その確保した領域を、どんな形で削るか」を決めます。つまり border-radius だけでは「丸く削る」固定だったところに、削り方の選択肢が増えたと考えると分かりやすい。
たとえば、ボタンの角を斜めに面取りするなら、こう書きます。
.btn-bevel {
/* 角から12pxの範囲を「角の領域」として確保する */
border-radius: 12px;
/* その領域を丸ではなく直線で削ぐ（面取り） */
corner-shape: bevel;
}ポイントは、形そのものは corner-shape の値を変えるだけで切り替わることです。border-radius の値（角の大きさ）はそのままに、bevel（面取り）、scoop（内側にえぐる）、notch（コの字に切り欠く）、squircle（角丸より自然な四角に近い丸）などへ宣言を差し替えれば、角の表情が変わります。要素のサイズが変わっても、角の領域は border-radius の指定に追従するので、レスポンシブでも崩れません。
角ごとに別の形を指定することもできます。たとえば「上の二つの角だけ削ぐ」なら、border-radius と同じく個別指定が使えます。
.card {
border-radius: 16px;
/* 左上・右上・右下・左下の順。上だけ面取り、下は通常の丸 */
corner-shape: bevel bevel round round;
}受託でよく出る「3つの角」をどう作るか
実際の案件で要望として出てくる角の表現は、おおむね次の三つに集約できます。それぞれ corner-shape のどの値で作れるかを整理します。
| 要望されがちな角 | corner-shape の値 | 補足 |
|---|---|---|
| クーポン券・チケット風の切り欠き | notch / scoop | EC のキャンペーン枠で頻出 |
| シャープで先進的な面取り | bevel | ボタン・バッジのブランド表現 |
| iOS 風の自然な角丸 | squircle | アプリ的な UI の質感に |
たとえば「キャンペーンのクーポン枠を、両脇がチケットのように切り欠かれた形にしたい」という要望は、これまで背景画像で作るのが定番でした。corner-shape: scoop を使えば、枠の色や幅が変わっても切り欠きが追従し、画像を一切持たずに同じ見た目を作れます。バリエーション（色違い・サイズ違い）が増えても、増えるのは CSS の数行だけです。
ブランドカラーの自動制御と同じく、こうした「見た目の質感」を CSS の宣言に寄せておくと、後からのトーン調整が一か所で済みます。配色の側面については、CSS contrast-color で配色を自動補正する記事で扱った考え方と組み合わせると、色も形も「壊れにくいデザインシステム」として持てます。
受託で組み込むときの落とし穴
弊社が制作を引き継いだあるアパレルブランドのキャンペーンサイト（社名は伏せます）では、トップに並ぶ商品カードの角がすべて「面取りされた斜めの角」というデザインで、前の制作会社はこれを一枚ずつ背景画像で作っていました。カードの色違いが八種類あり、それぞれに画像があって、セールで色を足すたびに画像の追加依頼が発生する状態でした。
私たちはこのカードを、border-radius で角の大きさを揃え、corner-shape: bevel で面取りに統一する形へ置き換えました。色違いは背景色の CSS 変数を変えるだけで済むようになり、八枚あった角の画像はゼロになりました。やったのは、画像に閉じ込められていた「角の形」を CSS の宣言に出しただけです。結果、新色の追加はデザイナーが変数を一つ足すだけになり、画像の作り直し依頼そのものが消えました。
この案件で一番効いたのは、フォールバックを最初に決めておくことでした。corner-shape は比較的新しいプロパティで、対応していない古いブラウザでは無視されます。無視された場合、border-radius の指定はそのまま効くため、「面取りのはずが、ただの角丸で表示される」という穏当な劣化になります。これは多くの装飾用途で許容できる挙動です。
.btn-bevel {
border-radius: 12px; /* 非対応ブラウザではこの角丸が見える */
corner-shape: bevel; /* 対応ブラウザでは面取りになる */
}ただし、notch（切り欠き）のように「角丸では意味が変わってしまう」表現を機能の一部に使う場合は、Baseline の対応状況を確認し、重要な箇所では対応ブラウザを前提にできるかを判断する必要があります。新しい CSS 機能をどこまで本番投入してよいかの線引きは、モダンCSSネイティブ機能の記事で扱った「Baseline を見て採用可否を決める」考え方がそのまま使えます。装飾なら積極的に、機能の根幹に関わるなら慎重に、と切り分けるのが安全です。
どこから着手するか
カンプの角の表現を「画像で作るしかない」と決めつけるのをやめるところから、サイトは軽くなります。斜めの面取り、内側のえぐり、チケット風の切り欠き——これらはもう、多くの場合 border-radius + corner-shape の数行で書けます。書ければ画像が減り、色やサイズの変更に角が自動で追従するので、次の担当者も迷いません。
最初の一歩としては、いま画像や clip-path で作っている「角の装飾」を一つ選び、corner-shape に置き換えてみることをお勧めします。そのうえで、非対応ブラウザで border-radius の角丸に穏当に劣化するかだけ確認すれば、本番に出せる品質になります。
カンプどおりの角が画像頼みで重い、デザイン変更のたびに装飾の作り直しが発生する、ブランドの細かな表現と保守性を両立させたい——そうしたお悩みがあれば、グリームハブのお問い合わせからご相談ください。現行サイトの装飾実装を拝見し、画像に閉じ込められた表現を CSS ネイティブに寄せられる部分とそうでない部分を切り分けたうえで、軽く保守しやすい形に作り直します。
