Widely available YES。全ブラウザで非常に長期にわたりサポート済み。安心して使用可能。
レイアウト Widely available

border-radius

角丸は現代の UI デザインにおいて最も基本的な装飾のひとつ。border-radius により、画像を使わずに角丸を CSS で実現できる。4つの角を個別指定したり、楕円形の角丸を作成したり、50% で正円を作成することもできる。

装飾ボックスモデル

概要

角丸は現代の UI デザインにおいて最も基本的な装飾のひとつ。border-radius により、画像を使わずに角丸を CSS で実現できる。4つの角を個別指定したり、楕円形の角丸を作成したり、50% で正円を作成することもできる。

対応ブラウザ

デスクトップ

Chrome 4+
Edge 12+
Safari 5+
Firefox 4+

モバイル

Chrome Android 18+
Safari iOS 4.2+
Firefox Android 4+

基本構文

CSS 
/* 均一な角丸 */
.card {
  border-radius: 8px;
}

/* 正円 */
.avatar {
  border-radius: 50%;
}

/* 個別指定 */
.tab {
  border-radius: 8px 8px 0 0;
}

/* 楕円形の角丸 */
.pill {
  border-radius: 9999px;
}

実務での使いどころ

  • ボタン・カードの角丸

    UI 要素に柔らかい印象を与える角丸デザイン。デザインシステムでの統一的な角丸サイズの管理。

  • 円形アバター

    正方形の画像に border-radius: 50% を適用して円形のプロフィール画像を作成する。

注意点

  • border-radius は outline には適用されない（ブラウザ依存で一部対応あり）。
  • overflow: hidden と組み合わせないと、子要素が角丸の外にはみ出す場合がある。

アクセシビリティ

  • 角丸は視覚的な装飾であり、アクセシビリティに直接的な影響はない。ただしクリックターゲットの形状が見た目と異なる（実際は矩形）点は把握しておく。

参考リンク