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

border-radius

border-radius は CSS のプロパティで、要素の境界の外側の角を丸めます。1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。

装飾ボックスモデル

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
border-radius
4
12
4
5
18
4.2
その他
css.properties.border-bottom-left-radius

border-bottom-left-radius は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます。
4
12
4
5
18
4.2
CSS プロパティ
elliptical corners

楕円の角
1
12
3.5
3
18
1
percentages

パーセンテージ
4
12
4
5
18
4.2
その他
css.properties.border-bottom-right-radius

border-bottom-right-radius は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の右下の角を丸めます。
4
12
4
5
18
4.2
CSS プロパティ
elliptical corners

楕円の角
1
12
3.5
3
18
1
percentages

パーセンテージ
4
12
4
5
18
4.2
4 values for 4 corners

4 隅の 4 つの値
4
12
4
5
18
4.2
elliptical borders

楕円形の境界線
1
12
4
3
18
4.2
percentages

パーセンテージ
8
12
4
5.1
18
5
その他
css.properties.border-top-left-radius

border-top-left-radius は CSS のプロパティは、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左上の角を丸くします。
4
12
4
5
18
4.2
CSS プロパティ
elliptical corners

楕円の角
1
12
3.5
3
18
1
percentages

パーセンテージ
4
12
4
5
18
4.2
その他
css.properties.border-top-right-radius

border-top-right-radius は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸) を指定することで、要素の右上の角を丸めます。
4
12
4
5
18
4.2
CSS プロパティ
elliptical corners

楕円の角
1
12
3.5
3
18
1
percentages

パーセンテージ
4
12
4
5
18
4.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
実装メモ
  • Chrome は、「-webkit-Appearance」が適切な値にオーバーライドされない限り、「<select>」要素の「border-radius」を無視します。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 4件
実装メモ
  • Firefox 50 より前では、角の丸い境界線スタイル (`border-radius` を使用) は、常に `border-style` が `solid` であるかのようにレンダリングされていました。 この問題は Firefox 50 で修正されました。
  • CSS3 標準に準拠するために、Firefox 4 は仕様に一致するように `<percentage>` 値の処理を変更します。 `border-radius: 50%;` を使用すると、任意のサイズの要素の境界線として楕円を指定できます。 Firefox 4 では、 `overflow`:visible` が設定されていない場合、コンテンツと画像を切り取った角が丸くなります。
削除済み
  • このバージョンで機能が削除されました (12)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 2件
実装メモ
  • Safari は、「-webkit-Appearance」が適切な値にオーバーライドされない限り、「<select>」要素の「border-radius」を無視します。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 2件
実装メモ
  • Safari は、「-webkit-Appearance」が適切な値にオーバーライドされない限り、「<select>」要素の「border-radius」を無視します。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 4件
実装メモ
  • Firefox 50 より前では、角の丸い境界線スタイルは常に「border-style」が単線であるかのようにレンダリングされていました。 この問題は Firefox 50 で修正されました。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • 以前は別名で対応していました: -moz-border-radius-bottomleft (1)
削除済み
  • このバージョンで機能が削除されました (12)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (4)
実装メモ
  • Firefox 4 より前では、高さの半径を指定する場合でも、`<percentage>` はボックスの幅を基準にしていました。 これは、単一の値が続く場合、`-moz-border-radius-bottomright` は常に円弧を描き、決して楕円を描かないことを意味します。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 4件
実装メモ
  • Firefox 50 より前では、角の丸い境界線スタイルは常に「border-style」が単線であるかのようにレンダリングされていました。 この問題は Firefox 50 で修正されました。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • 以前は別名で対応していました: -moz-border-radius-bottomright (1)
削除済み
  • このバージョンで機能が削除されました (12)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (4)
実装メモ
  • Firefox 4 より前では、高さの半径を指定する場合でも、`<percentage>` はボックスの幅を基準にしていました。 これは、単一の値が続く場合、`-moz-border-radius-bottomright` は常に円弧を描き、決して楕円を描かないことを意味します。
注釈 1件
実装メモ
  • Chrome 4 より前では、スラッシュ「/」表記はサポートされていません。 2 つの値を指定すると、楕円形の境界線が 4 隅すべてに描画されます。 「-webkit-border-radius: 40px 10px;」は「border-radius: 40px / 10px;」と同等です。
注釈 1件
実装メモ
  • Safari 5 より前では、スラッシュ「/」表記はサポートされていません。 2 つの値を指定すると、楕円形の境界線が 4 隅すべてに描画されます。 「-webkit-border-radius: 40px 10px;」は「border-radius: 40px / 10px;」と同等です。
注釈 1件
実装メモ
  • Firefox 4 より前では、`<percentage>` 値は非標準の方法で実装されていました。 水平半径と垂直半径は両方とも境界ボックスの幅に相対していました。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 4件
実装メモ
  • Firefox 50 より前では、角の丸い境界線スタイルは常に「border-style」が単線であるかのようにレンダリングされていました。 この問題は Firefox 50 で修正されました。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • 以前は別名で対応していました: -moz-border-radius-topleft (1)
削除済み
  • このバージョンで機能が削除されました (12)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (4)
実装メモ
  • Firefox 4 より前では、高さの半径を指定する場合でも、`<percentage>` はボックスの幅を基準にしていました。 これは、単一の値が続く場合、`-moz-border-radius-bottomright` は常に円弧を描き、決して楕円を描かないことを意味します。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 4件
実装メモ
  • Firefox 50 より前では、角の丸い境界線スタイルは常に「border-style」が単線であるかのようにレンダリングされていました。 この問題は Firefox 50 で修正されました。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • 以前は別名で対応していました: -moz-border-radius-topright (1)
削除済み
  • このバージョンで機能が削除されました (12)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (4)
実装メモ
  • Firefox 4 より前では、高さの半径を指定する場合でも、`<percentage>` はボックスの幅を基準にしていました。 これは、単一の値が続く場合、`-moz-border-radius-bottomright` は常に円弧を描き、決して楕円を描かないことを意味します。

基本構文

CSS 
/* Uniform rounded corners */
.card {
  border-radius: 8px;
}

/* Perfect circle */
.avatar {
  border-radius: 50%;
}

/* Custom values */
.tab {
  border-radius: 8px 8px 0 0;
}

/* Elliptical rounded corners */
.pill {
  border-radius: 9999px;
}

ライブデモ

uniform rounded corner

border-radius uniform rounded corner demo.

プレビュー全画面表示

positivecircle

border-radius positivecircle demo.

プレビュー全画面表示

pil type

border-radius pil type demo.

プレビュー全画面表示

実務での使いどころ

  • ボタン・カードの角丸

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

  • 円形アバター

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

注意点

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

アクセシビリティ

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

参考リンク