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 の円弧がフォールバックとして表示されます。
アクセシビリティ
- 角の形状は純粋に装飾的な変更であり、アクセシビリティに影響しません。