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

このプロパティ border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius の4つのプロパティの一括指定です。

半径は要素に境界がなくても、 background 全体に適用されます。クリッピングが行われる正確な位置は、 background-clip プロパティで定義します。

border-radius プロパティは border-collapsecollapse の table 要素には適用されません。

メモ: 他の一括指定プロパティと同様、個別のサブプロパティは border-radius:0 0 inherit inherit のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。

構文

/* 最初の半径の構文は1つから4つの値が許可されています */
/* 半径を全4角に設定 */
border-radius: 10px;

/* 左上と右下 | 右上と左下 */
border-radius: 10px 5%;

/* 左上 | 右上と左下 | 右下 */
border-radius: 2px 4px 2px;

/* 左上 | 右上 | 右下 | 左下 */
border-radius: 1px 0 3px 4px;

/* 2番目の半径の構文は1つから4つの値が許可されています */
/* (最初の半径の値) / radius */
border-radius: 10px 5% / 20px;

/* (最初の半径の値) / 左上と右下 | 右上と左下 */
border-radius: 10px 5% / 20px 30px;

/* (最初の半径の値) / 左上 | 右上と左下 | 右下 */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (最初の半径の値) / 左上 | 右上 | 右下 | 左下 */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* グローバル値 */
border-radius: inherit;
border-radius: initial;
border-radius: unset;

border-radius プロパティは次のように指定することができます。

  • 1つ、2つ、3つ、4つの <length> 又は <percentage> の値。これは角の半径を1つ設定するために使用します。
  • その後に任意で、 "/" と1つ、2つ、3つ、4つの <length> 又は <percentage> の値。これは追加の半径を設定し、楕円形の角にすることができます。

半径 all-corner.png 境界の四隅に使用される半径を記述する <length> 又は <percentage> です。1つの値の構文のみで使用されます。
左上と右下 top-left-bottom-right.png 要素ボックスの左上と右下の隅の境界に使用される半径を記述する <length> 又は <percentage> です。2つの値の構文のみで使用されます。
右上と左下 top-right-bottom-left.png 要素ボックスの右上と左下の隅の境界に使用される半径を記述する <length> 又は <percentage> です。2つ又は3つの値の構文のみで使用されます。
左上 top-left.png 要素ボックスの左上の隅の境界に使用される半径を記述する <length> 又は <percentage> です。3つ又は4つの値の構文のみで使用されます。
右上 top-right.png 要素ボックスの右上の隅の境界に使用される半径を記述する <length> 又は <percentage> です。4つの値の構文のみで使用されます。
右下 bottom-rigth.png 要素ボックスの右下の隅の境界に使用される半径を記述する <length> 又は <percentage> です。3つ又は4つの値の構文のみで使用されます。
左下 bottom-left.png 要素ボックスの左下の隅の境界に使用される半径を記述する <length> 又は <percentage> です。4つの値の構文のみで使用されます。
<length>
円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 length 値を使用して記述します。負の数は無効です。
<percentage>
円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。

例:

border-radius: 1em/5em;

/* ... is equivalent to: */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;
border-radius: 4px 3px 6px / 2px 4px;

/* ... is equivalent to: */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

形式文法

<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?

where
<length-percentage> = <length> | <percentage>

  border: solid 10px;
  /* 境界が「D」のように描画される */
  border-radius: 10px 40px 40px 10px;
  border: groove 1em red;
  border-radius: 2em;
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
  border: none;
  border-radius: 40px 10px;
  border: none;
  border-radius: 50%;
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;

ライブサンプル

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
border-radius の定義
勧告候補 初回定義

初期値一括指定の各プロパティとして
適用対象all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.。 ::first-letter にも適用されます。
継承なし
パーセンテージrefer to the corresponding dimension of the border box
メディア視覚
計算値一括指定の各プロパティとして
アニメーションの種類一括指定の各プロパティとして
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 4
補足
完全対応 4
補足
補足 Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 4
補足
完全対応 4
補足
補足 Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.
補足 To conform to the CSS3 standard, Firefox 4 changes the handling of <percentage> values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with border-radius: 50%;. Firefox 4 also makes rounded corners clip content and images if overflow: visible is not set.
未対応 1 — 12
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 9Opera 完全対応 10.5
補足
完全対応 10.5
補足
補足 In Opera prior to version 11.60, replaced elements with border-radius will not have rounded corners.
Safari 完全対応 5
補足
完全対応 5
補足
補足 Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 2
接頭辞付き
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 ありEdge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Opera Android 完全対応 Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Elliptical bordersChrome 完全対応 あり
補足
完全対応 あり
補足
補足 Prior to Chrome 4, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.
Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 あり
補足
完全対応 あり
補足
補足 Prior to Safari 4.1, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.
WebView Android ? Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS ? Samsung Internet Android 完全対応 あり
4 values for 4 cornersChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 5WebView Android ? Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS ? Samsung Internet Android 完全対応 あり
PercentagesChrome 完全対応 あり
補足
完全対応 あり
補足
補足 <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Edge 完全対応 12Firefox 完全対応 4
補足
完全対応 4
補足
補足 <percentage> values are implemented in a non-standard way prior to Firefox 4. Both horizontal and vertical radii were relative to the width of the border box.
IE 完全対応 ありOpera 完全対応 11.5
補足
完全対応 11.5
補足
補足 The implementation of <percentage> values was buggy in Opera prior to 11.50.
Safari 完全対応 5.1
補足
完全対応 5.1
補足
補足 <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
WebView Android 完全対応 あり
補足
完全対応 あり
補足
補足 <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Simplexible, Prinz_Rana, Sebastianz, ethertank, sosleepy, myakura
最終更新者: mfuji09,