border-top-right-radius

CSS の border-top-right-radius プロパティは、要素の右上の角を丸めます。

丸みは円または楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

border-top-right-radius.png

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 background-clip プロパティの値で定義されます。

このプロパティの値が border-top-right-radius プロパティの後の border-radius 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。

構文

/* 角を円にする */
/* border-top-right-radius: radius */
border-top-right-radius: 3px;

/* 角を楕円にする */
/* border-top-right-radius: horizontal vertical */
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

値１つで指定する場合:

  • 値は <length> 又は <percentage> であり、境界の角に使用する円の半径を示します。

値２つで指定する場合:

  • 最初の値は <length> 又は <percentage> であり、境界の角に使用する楕円の水平の軌道長半径を示します。
  • 最初の値は <length> 又は <percentage> であり、境界の角に使用する楕円の垂直の軌道長半径を示します。

値

<length-percentage>
円の半径又は楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の <length> データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。

形式文法

<length-percentage>{1,2}
where 
<length-percentage> = <length> | <percentage>

例

ライブ例 コード
境界として使用されている円弧 
div {
  border-top-right-radius: 40px 40px;
}
境界として使用されている楕円の弧 
div {
  border-top-right-radius: 40px 20px;
}
ボックスは正方形。境界として使用されている円弧 
div {
  border-top-right-radius: 40%;
}
.
 ボックスは正方形ではない。境界として使用されている楕円の弧 
div {
  border-top-right-radius: 40%;
}
背景色は境界で切り取られる 
div {
  border-top-right-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
border-top-right-radius の定義		 勧告候補 初回定義
初期値0
適用対象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
計算値２つの絶対的な length 又は <percentage> 値
アニメーションの種類length または percentage, calc();

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-top-right-radiusChrome 完全対応 4
完全対応 4
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 4
補足
完全対応 4
補足
補足 Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 1 — 12
代替名
代替名 非標準の名前 -moz-border-radius-topright を使用しています。
IE 完全対応 9Opera 完全対応 10.5
完全対応 10.5
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 5
完全対応 5
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 ≤37
完全対応 ≤37
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 18
完全対応 18
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 4 — 14
代替名
代替名 非標準の名前 -moz-border-radius-topright を使用しています。
Opera Android 完全対応 11
完全対応 11
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 4.2
完全対応 4.2
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 1.0
完全対応 1.0
完全対応 1.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Elliptical cornersChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
PercentagesChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 4
完全対応 4
完全対応 1
補足
補足 Before Firefox 4, the <percentage> was relative to the width of the box even when specifying the radius for a height. This implied that -moz-border-radius-topright was always drawing an arc of circle, and never an ellipse, when followed by a single value.
IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

CSS の border-radius に関するプロパティ: 一括指定の border-radius, 他の角のための border-top-left-radius, border-bottom-right-radius, border-bottom-left-radius