角丸と聞いて、何を思い浮かべますか。
border-radius。たぶんそれだけです。
四角を少し丸める。UIを柔らかくする。もう何年も前から当たり前に使ってきたCSSです。
ただ、正直に言います。border-radiusだけでは、ずっと物足りなかった。
全部同じ丸み。数学的に正しいが、人間の目には少し硬い。
その違和感に、ようやくCSS側が答えを出し始めました。
それがcorner-shapeです。
corner-shapeとは何か
corner-shapeは、角の形状そのものを指定するためのCSSプロパティです。
これまでの角丸は、円弧だけでした。
corner-shapeは、角のカーブを「どのように曲げるか」を指定できます。
丸いのか。
四角に近いのか。
あるいは、スーパーカーブのような独特な形か。
UIの角を、ようやくデザインの文脈で扱えるようになる。
それがcorner-shapeの本質です。
border-radiusとの決定的な違い
border-radiusは数値です。
corner-shapeは性質です。
border-radius: 12px;
これは「どれくらい丸めるか」しか指定できない。
corner-shapeは「どう丸めるか」を指定します。
同じ12pxでも、印象はまるで変わる。
なぜ今までのやり方を一度止める必要があるのか
止める、という言葉は少し強いですが、考え直す価値は確実にあります。
理由1 UIが全部同じ顔になる問題
最近のWebサイトを眺めてみてください。
どれも似た角丸。
どれも似たカードUI。
原因の一つはborder-radiusの限界です。
角の表情を変えられない。
デザインで差を付けたくても、CSS側が追いついていなかった。
理由2 デザインツールとの乖離
FigmaやSketchでは、角のカーブを細かく調整できます。
iOSのUIも、単なる円弧ではありません。
しかしWebでは再現できない。
この断絶が、ずっとありました。
理由3 無理なSVG化が増える
表現できないからSVGに逃げる。
結果、管理が面倒になる。
レスポンシブも厄介。
CSSでできるなら、それに越したことはない。
corner-shapeの基本的な書き方
書き方はシンプルです。
.box {
border-radius: 16px;
corner-shape: squircle;
}
まずborder-radiusで大きさを指定。
corner-shapeで形状を指定。
この役割分担が重要です。
指定できる代表的な値
- round
- bevel
- squircle
- superellipse
roundは従来の円弧。
bevelは斜めカット。
squircleは四角と円の中間。
superellipseはより自然な曲線。
この違い、数値では説明しづらい。
見た瞬間に分かります。
実務で一番使われそうなsquircle
正直に言うと、最初に多用されるのはsquircleでしょう。
squircleが強い理由
丸すぎない。
硬すぎない。
iOSのボタンやカードに近い印象。
人間の目に自然。
同じ16pxでも、border-radiusだけより洗練される。
ここで一つ問いかけます。
その角丸、本当に円である必要がありますか。
corner-shapeのメリット
デザイン表現の幅が一気に広がる
これが最大の利点です。
角の表情が変わるだけで、UIの印象は驚くほど変わる。
CSSだけで完結する
SVG不要。
画像不要。
レスポンシブ対応も自然。
デザインツールとの距離が縮まる
Figmaで作った角に近づけられる。
デザイナーとの会話が楽になる。
corner-shapeのデメリット
対応ブラウザが限定的
現時点では、実験的な扱いです。
全ブラウザで安心して使える段階ではない。
過度に使うと違和感が出る
すべてをsquircleにすれば良いわけではない。
使いどころは選ぶ必要があります。
デザイン意図がないと意味がない
何となく使うと、ただの自己満足になる。
なぜこの角なのか、説明できるか。
だからフォールバック設計が前提になる
corner-shapeを使うなら、必ずフォールバックを考えます。
.box {
border-radius: 16px;
}
@supports (corner-shape: squircle) {
.box {
corner-shape: squircle;
}
}
非対応環境では通常の角丸。
対応環境では一段上の表現。
この割り切りが、実務ではちょうどいい。
どんな場面で使うべきか
管理画面やWebアプリ
対応ブラウザをコントロールしやすい。
UIの質が直接評価される。
ブランドを意識したLP
他と違う印象を出したい。
角の表情は意外と効きます。
実験的なUI
新しい表現を試す場所として最適。
逆に、コーポレートの保守案件では慎重に。
border-radiusを完全に捨てる話ではない
誤解しないでほしいのはここです。
corner-shapeはborder-radiusの代替ではありません。
拡張です。
大きさはborder-radius。
形はcorner-shape。
この二段構えが正しい理解。
フロントエンド実務者としての個人的な偏見
私は角にこだわるUIが好きです。
理由は単純。
雑に作られたUIほど、角が雑だから。
corner-shapeは、UIに神経が通うための道具だと思っています。
使うかどうかは自由。
だが、知っているかどうかで設計の深さは変わる。
最後にもう一つ問いかけます。
その角、誰のために丸めていますか。
関連して知っておくと理解が深まるCSS
- border-radiusの楕円指定
- clip-pathとpath()
- aspect-ratio
- container queries
corner-shapeは単体でも面白い。
ただ、他のCSSと組み合わせることで、本領を発揮します。
CSSは静的な装飾言語ではなくなりました。
形状そのものを設計できる時代です。
corner-shapeは、その流れの中で生まれた自然な進化。
すぐに使う必要はない。
だが、知らずにいるのはもったいない。
そんな立ち位置の新機能です。