CSS corner-shapeで折り曲げ角を実装｜プロンプト作例と活用法

Webデザインに「紙」の質感を

UIデザインのトレンドは常に変化していますが、近年特に注目を集めているのが「リアルな質感」の表現です。中でも、紙をめくったような折り曲げ角（folded corner）は、カードUIやノート風デザインでよく見られるエフェクトです。これまでは画像の重ね合わせや複雑なCSSハックが必要でしたが、2026年4月のWebプラットフォームアップデートで登場したcorner-shapeプロパティにより、ネイティブなCSSだけで実現できるようになりました。

本記事では、corner-shapeの基本的な使い方から、実際のプロジェクトで応用できるテクニックまでを解説します。AIと組み合わせたプロンプト実例も紹介するので、ぜひ試してみてください。

corner-shapeとは何か

corner-shapeは、要素の角の形状をCSSだけで制御できる新しいプロパティです。border-radiusで丸みをつけることはできましたが、corner-shapeを使えば折り曲げ（fold）や切り欠き（notch）など、より多様な形を表現できます。2026年3月のBaselineアップデートで「新しく利用可能になった機能」としてリストアップされており、主要ブラウザでのサポートが急速に進んでいます。

基本的な構文は以下の通りです。

.card {
  width: 300px;
  height: 200px;
  background: #fff;
  border: 1px solid #ccc;
  corner-shape: fold;
  corner-size: 20px;
}

これだけで、右下の角が紙を折ったように内側に折れ曲がったカードが完成します。corner-sizeで折り曲げの大きさも調整可能。まさに「CSSだけでここまでできるのか」という感覚です。

従来の手法との比較

これまで折り曲げ角を実現するには、以下のような手法が一般的でした。

• 疑似要素＋回転transform：三角形を疑似要素で作り、回転させて角に配置。位置調整が難しく、レスポンシブ対応も煩雑。
• SVGのクリップパス：複雑なパスを定義する必要があり、メンテナンス性が低い。
• 画像背景：最も簡単だが、テキスト変更やスケーリングに弱い。

corner-shapeはこれらをすべて解決します。値はround（丸）、fold（折り曲げ）、notch（切り欠き）などが用意されており、それぞれにcorner-sizeを組み合わせるだけで多彩な表現が可能です。

実践的な活用例：3つのパターン

1. カードUIのアクセント

商品カードやプロフィールカードで、1つの角だけを折り曲げることで「特別感」を演出できます。例えば、右上の角だけを折り曲げて「New」ラベルを重ねる、といった使い方です。

.product-card {
  corner-shape: fold;
  corner-size: 24px;
  /* 右上だけに適用 */
  corner-top-right-shape: fold;
  corner-top-right-size: 24px;
}

2. ノート・メモアプリの擬似体験

デジタルノートアプリで、紙の質感を再現するのにぴったりです。角を折り曲げることで「めくられる」感覚をUIに与えられます。アニメーションと組み合わせれば、クリックで角がめくれるインタラクションも可能です。

3. 装飾的な引用ボックス

引用文を表示するブロックの角にnotchを適用すると、スクラップブックの切り抜きのような雰囲気になります。ページのアクセントとして効果的です。

AIプロンプトでコード生成を効率化

ここで、AIを活用したコーディングのテクニックを紹介します。以下のようなプロンプトをAIに入力すれば、すぐに使えるコードが得られます。

「CSSのcorner-shapeプロパティを使って、カードの右下の角だけを折り曲げて、その上に赤い円形のバッジ（’Sale’と表示）を配置するHTMLとCSSコードを生成してください。折り曲げサイズは30px、バッジは角から10px内側に配置。」

さらに、デザインのバリエーションを生成したい場合は「クラシックな紙の質感」「モダンでミニマル」「カラフルで遊び心のある」といったスタイル指示を加えると、AIが適切なカラーパレットや影まで提案してくれます。これにより、corner-shapeの可能性を素早く試せます。

Baselineステータスと注意点

2026年4月時点で、corner-shapeはChrome 120以降、Edge 120以降、Safari 18以降でサポートされています。Firefoxはまだ実装途中ですが、フラグ付きで利用可能です。実運用では、フォールバックとして従来の手法（疑似要素やクリップパス）を用意しておくことをおすすめします。また、@supports規則を使って対応ブラウザでのみ新しい表現を有効にする方法も有効です。

@supports (corner-shape: fold) {
  .card {
    corner-shape: fold;
    corner-size: 20px;
  }
}

まとめ：CSSの進化がもたらす「紙の自由」

corner-shapeは、一見小さなプロパティですが、Webデザインに「物理的な質感」をもたらす大きな可能性を秘めています。紙の角を折るという単純な行為が、UIに温かみや親しみを与え、ユーザー体験を向上させます。画像やSVGに頼らず、CSSだけで表現できるようになったことで、パフォーマンスやメンテナンス性も向上しました。

AIと組み合わせれば、プロトタイピングやデザインシステムへの適用もスムーズです。ぜひこの新機能を試して、あなたのWebサイトに「紙の質感」を加えてみてください。

参照

• New to the web platform in April (web.dev)
• March 2026 Baseline monthly digest (web.dev)
• February 2026 Baseline monthly digest (web.dev)
• Using CSS corner-shape For Folded Corners (CSS-Tricks)
• A Scrollytelling Gift for Mum on Mother’s Day 2026 (CSS-Tricks)