角の形を自在に変える！ CSS corner-shapeプロパティ入門

CSSのcorner-shapeプロパティは、border-radiusで定義された角の領域に対して、「どのような形状で処理するか」を指定できるプロパティです。

これまで、角の形状を変えるデザインを実現するには、用途に応じて複数の手法を組み合わせる必要がありました。

丸くする：border-radius
斜めに切る：疑似要素やclip-path
内側にえぐる：SVGやCSS Masking（mask-image）

たとえば「角を斜めに切り落としたボタン」を作る場合、clip-pathで多角形を指定する方法があります。

/* 四隅を斜めに切り落とす */
button {
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );
}

この方法では、角の大きさや形状を変更するたびに座標を再計算する必要があり、調整が複雑になりがちです。また、座標の意味が直感的に分かりにくく、コードから見た目の意図を読み取りにくいという課題もありました。

corner-shapeプロパティを使えば、border-radiusで確保した角の領域に対して処理方法を指定するだけで、同様の表現を直感的に実装できます。

1. 基本：値の紹介

corner-shapeプロパティを使用する際のポイントは次のとおりです。

corner-shapeプロパティは単独では機能しない（あわせてborder-radiusプロパティの指定が必要）
border-radiusプロパティの値が0の場合、視覚的変化は起こらない
半径が大きいほど、角のデザインの個性が強く出る

以下のデモでは、corner-shapeプロパティの値による形状の違いを確認できます。あわせてborder-radiusプロパティの値もスライダーで変更できます。ぜひ動かしてみてください。

※注意：本記事のデモは、Chrome・Edge 139以上でご覧ください。

corner-shapeプロパティの書き方を紹介します。

button { 
  border-radius: 12px;
  corner-shape: bevel;
}

値としてsuperellipse()を指定すると、超楕円（superellipse）と呼ばれる曲線を使用した角を作成できます。引数に数値を指定することで曲率を調整でき、値が1に近いほど円に近い形になります。値が1付近では円に近い形になり、値を小さくすると角が内側にえぐれた形に、大きくすると正方形に近い形に変化します。

squircleはこの超楕円の代表的な形状のひとつで、近年のUIデザインでよく見られる「丸すぎない角丸」を表現できます。superellipse()を使えば、その曲線を細かく調整することが可能です。

以下のデモでは、border-radiusプロパティの値とあわせて、superellipse()の引数もスライダーで変更できます。

指定できる値とそれぞれの形状は、以下のとおりです。

round：通常の丸みのある角
bevel：角を直線的に切り落とした形
scoop：角を内側にえぐったような形
notch：角が四角く欠けたような形
square：角の丸みを打ち消した直角
squircle：円と正方形の中間のような滑らかな曲線（超楕円の一種）
superellipse()：超楕円の曲率を数値で指定できる形状（値によって円に近い形から四角に近い形まで変化）

2. 応用：デモ

corner-shapeプロパティは、角の形状を一括で指定できるだけでなく、特定の角や辺ごとに指定するための派生プロパティも用意されています。

corner-top-left-shape/corner-top-right-shape/corner-bottom-left-shape/corner-bottom-right-shapeを使えば、四隅それぞれを個別に設定できます。さらに、左右・上下の2つの角をまとめて指定するcorner-left-shapeやcorner-right-shapeなどのプロパティも存在します。

たとえば、左側の角だけを斜めに切り落とし、右側は丸くする、といった指定も可能です。

.label {
  border-radius: 12px;
  /* 「corner-shape: bevel round round bevel」と書く場合と同じ */
  corner-left-shape: bevel;
  corner-right-shape: round;
}

corner-shapeプロパティを様々な形で利用した実装例をいくつか紹介します。

ボタンなどの角の形を変えたり、あしらいを作ったりするだけでなく、手書き風のフキダシやマーカー線などの表現も可能です。ひらめき次第でさらにいろいろなアレンジができそうですね。

対応ブラウザ

corner-shapeプロパティは、Chrome・Edge 139（2025年8月）以上で利用可能です。

参照：Can I use…

まとめ

corner-shapeプロパティを使うと、SVGやclip-pathを使う場合と比べて、何をしているコードなのかが直感的に分かりやすくなります。また、形状や色・大きさなどもCSSの値として簡単に変更できます。アニメーションの表現にも役立ちそうですね。

CSSだけで表現できるデザインの幅が広がるのは、実装者にとって嬉しいことです。ブラウザの対応状況も見ながら、ぜひ積極的に活用していきたいですね。

ICS MEDIA