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

corner-shape

border-radius と組み合わせて、角の形状をカスタマイズできます。squircle（角丸と正方形の中間形状）は、iOSアプリアイコンのような滑らかな角丸を実現します。デフォルトの round に加え、superellipse 形状など、より洗練されたデザインの選択肢を提供します。デザインの品質にこだわるプロジェクトに有効です。

角形状ボーダー

概要

border-radius と組み合わせて、角の形状をカスタマイズできます。squircle（角丸と正方形の中間形状）は、iOSアプリアイコンのような滑らかな角丸を実現します。デフォルトの round に加え、superellipse 形状など、より洗練されたデザインの選択肢を提供します。デザインの品質にこだわるプロジェクトに有効です。

対応ブラウザ

デスクトップ

Chrome 139+
Edge 139+
Safari 未対応
Firefox 未対応

モバイル

Chrome Android 139+
Safari iOS 未対応
Firefox Android 未対応

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク