角丸
読み: かどまる
画像やUI要素の四隅を丸くする装飾処理。柔らかく親しみやすい印象を与えるデザイン手法。
角丸とは、画像や UI 要素の四隅を直角ではなく円弧状に丸める装飾処理である。角が丸いデザインは柔らかく親しみやすい印象を与えるため、モダンな Web デザインやアプリ UI で広く採用されている。CSS では border-radius プロパティで角の丸みを指定する。
角丸の半径を大きくするほど丸みが強くなり、画像の幅と高さの 50% に設定すると完全な円形になる。SNS のプロフィールアイコンが円形なのは、border-radius: 50% を適用した結果である。一般的なカードデザインでは 8〜16px 程度の角丸が使われることが多い。
画像自体に角丸を焼き込みたい場合は、丸型切り抜きツールで円形にトリミングする方法がある。ドロップシャドウや枠線と組み合わせると、カード型のレイアウトに統一感が生まれる。