こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webデザインで「角の表現」は、UIの印象を左右する非常に重要な要素です。
これまで角を丸めるといえば、ほぼ例外なく border-radius が使われてきました。
確かに便利で直感的ですが、実はこの方法、角の表現としてはかなり限定的です。
例えば、
・角を斜めに削りたい。
・丸ではなく直線的に落としたい。
・カードやボタンに工業製品のようなシャープさを出したい。
こうした表現をしようとすると、
clip-path を使ったり、SVGを用意したりと、途端に実装コストが跳ね上がります。
しかも clip-path は可読性が低く、後から調整しにくいという弱点もあります。
そこで注目したいのが、CSSの corner-shape という新しいプロパティです。
これは「角をどう削るか」という概念を、border-radiusの延長線で扱えるのが最大の特徴です。
丸める。
削る。
斜めに落とす。
こうした角の表情を、clip-path不要で、CSSだけで制御できるようになります。
この記事では、corner-shapeで何ができるのか、border-radiusとの違い、実務でどう使えるのかを、CodePenデモを前提に丁寧に解説していきます。
角表現の引き出しを増やしたい方にとって、必ず武器になる内容です。
corner-shapeとは何か
corner-shapeは、要素の角を「どのような形状で削るか」を指定するCSSプロパティです。
border-radiusが「どれだけ丸めるか」だけを指定するのに対し、corner-shapeは削り方の種類そのものを制御します。
- 丸く削る
- 直線的に削る
- 斜めにカットする
これにより、これまでSVGやclip-pathでしか表現できなかった角デザインを、CSSレベルで扱えるようになります。
border-radiusとの決定的な違い
border-radiusは円弧で角を処理します。
そのため、どんなに数値を工夫しても「丸い角」以上の表現はできません。
一方、corner-shapeは角の輪郭そのものを定義します。
重要な違い
border-radiusは「半径」を指定する。 corner-shapeは「形状」を指定する。
この違いにより、UI全体の印象をよりコントロールしやすくなります。
corner-shapeの基本的な書き方
corner-shapeは、border-radiusと組み合わせて使います。
radiusで大きさを決め、shapeで削り方を決めるイメージです。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
radiusとshapeは役割が完全に分離しているのがポイントです。
代表的なcorner-shapeの種類
round
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
最も基本的な形状です。
実質的には従来のborder-radiusと同じ見た目になります。
bevel
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
角を直線的にカットする形状です。
工業製品風、テック系UIとの相性が非常に良いです。
scoop
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
角をえぐるように削る形状です。
柔らかさと個性を同時に出せます。
clip-pathを使わないメリット
corner-shapeを使う最大の利点は、clip-pathを避けられる点です。
- コードが短く読みやすい
- デザイン修正が容易
- レスポンシブ対応が楽
特に実務では、後から微調整が入るケースがほとんどです。
その点でcorner-shapeは、保守性の高い選択肢になります。
実務での使いどころ
corner-shapeは、以下のようなUIで効果を発揮します。
- カードUI
- ボタン
- ナビゲーションメニュー
少し角を変えるだけで、UIの印象は驚くほど変わります。
border-radiusだけに頼らない角設計は、デザインの差別化にも直結します。
まとめ
corner-shapeは、角デザインの表現力を一段階引き上げるCSSプロパティです。
border-radiusだけでは表現できなかった「削り方」を、シンプルなCSSで実装できます。
clip-pathに頼らず、保守性と表現力を両立したい方は、ぜひ取り入れてみてください。