Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

corner-shape

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

corner-shape は一括指定の CSS プロパティで、border-radius プロパティ値で指定された領域内のボックスの角を指定します。

角形状ボーダー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
corner-shape
実験的
139
139
139
その他
css.properties.corner-block-end-shape
実験的

corner-block-end-shape は CSS のプロパティで、ボックスのブロック末尾にあるの両方の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-block-start-shape
実験的

corner-block-start-shape は CSS のプロパティで、ボックスのブロック先頭にあるの両方の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-bottom-left-shape
実験的

corner-bottom-left-shape は CSS のプロパティで、ボックスの左下の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-bottom-right-shape
実験的

corner-bottom-right-shape は CSS のプロパティで、ボックスの右下の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-bottom-shape
実験的

corner-bottom-shape は CSS のプロパティで、ボックスの下端の両方の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-end-end-shape
実験的

corner-end-end-shape は CSS のプロパティで、ボックスのブロック末尾、インライン末尾の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-end-start-shape
実験的

corner-end-start-shape は CSS のプロパティで、ボックスのブロック末尾、インライン先頭の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-inline-end-shape
実験的

corner-inline-end-shape は CSS のプロパティで、ボックスのインライン末尾にあるの両方の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-inline-start-shape
実験的

corner-inline-start-shape は CSS のプロパティで、ボックスのインライン先頭にあるの両方の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-left-shape
実験的

corner-left-shape は CSS のプロパティで、ボックスの左端の両方の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-right-shape
実験的

corner-right-shape は CSS のプロパティで、ボックスの右端の両方の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-start-end-shape
実験的

corner-start-end-shape は CSS のプロパティで、ボックスのブロック先頭、インライン末尾の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-start-start-shape
実験的

corner-start-start-shape は CSS のプロパティで、ボックスのブロック先頭、インライン先頭の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-top-left-shape
実験的

corner-top-left-shape は CSS のプロパティで、ボックスの左上の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-top-right-shape
実験的

corner-top-right-shape は CSS のプロパティで、ボックスの右上の角の border-radius 領域における形状を指定します。
139
139
139
css.properties.corner-top-shape
実験的

corner-top-shape は CSS のプロパティで、ボックスの下端の両方の角の border-radius 領域における形状を指定します。
139
139
139
css.types.corner-shape-value
実験的

は CSS のデータ型で、コンテナーの角の形状を記述します。これは corner-shape 一括指定プロパティと、その構成要素のプロパティで使用され、影響を受けるコンテナーの角に適用される形状を指定します。
139
139
139
CSS タイプ
bevel
実験的
139
139
139
notch
実験的
139
139
139
round
実験的
139
139
139
scoop
実験的
139
139
139
square
実験的
139
139
139
squircle
実験的
139
139
139
superellipse
実験的

`superellipse()` 関数
139
139
139
その他
css.types.superellipse
実験的

superellipse() は CSS の関数で、楕円の曲率を定義するプロパティであり、角の形状を直接、または <corner-shape-value> キーワードを介して指定します。
139
139
139
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.ios-style-card {
  border-radius: 20px;
  corner-shape: squircle;
}

ライブデモ

squircle

CSS Squircle demo.

プレビュー全画面表示

Round(normal)

CSS Round(normal) demo.

プレビュー全画面表示

cardcomparison

CSS cardcomparison demo.

プレビュー全画面表示

実務での使いどころ

  • iOS風のスーパー楕円角丸の実装

    squircle を使って、Appleのデザイン言語に見られる滑らかなスーパー楕円形の角丸をCSSだけで実現できます。

注意点

  • Chrome 139以降でのみサポートされる非常に新しいプロパティです。他のブラウザでは通常の border-radius の円弧がフォールバックとして表示されます。

アクセシビリティ

  • 角の形状は純粋に装飾的な変更であり、アクセシビリティに影響しません。

参考リンク