【CSS】corner-shapeプロパティで角の形をカスタマイズ

どうも、くまだです。

border-radiusで角を丸くするのは当たり前になってきましたが、さらにその形を変えられる corner-shapeというプロパティが登場しました。

斜め切りの角、くぼんだ角、Appleデバイスのアイコンでおなじみのスクアークルなど、CSSだけで作れてしまいます。

corner-shapeプロパティ

corner-shape は border-radius で定義した角の「形」を変えるプロパティです。

border-radius が「角の大きさ（どこまで削るか）」を決めるのに対して、corner-shape は「その削り方の形」を決めます。2つをセットで使う、という感覚です。

## 基本の書き方

.box {
  border-radius: 12px;
  corner-shape: bevel;
  padding: 4px 12px;
  background-color: #0070f3;
  color: #fff;
  text-align: center;
}

border-radiusで角のサイズを指定して、corner-shapeで形を指定します。corner-shape だけ書いても何も変わらないので注意。

値は1〜4個まで指定でき、border-radiusと同じ順序（時計回り：左上・右上・右下・左下）で各角を個別に設定できます。

/* 全角同じ */

corner-shape: bevel;

/* 上下 / 左右 */

corner-shape: bevel notch;

/* 左上 / 右上左下 / 右下 */

corner-shape: bevel round scoop;

/* 左上 右上 右下 左下 */

corner-shape: bevel round scoop notch;

• round: デフォルト、常の丸角と同じ見た目
• bevel：指定した範囲の端と端を直線で結んだ形。斜め切り。
• notch:直角にえぐれたような形
• scoop：カーブしたくぼみ
• squircle：iOSのアプリアイコンに使われているあの形で、roundより自然になめらか
• square：直角に戻す

2026年4月時点の状況です。

ここまで読んでくださりありがとうございました。