border-top-right-radius
CSS の border-top-right-radius
プロパティは、要素の右上の角を丸めます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
丸みは円または楕円にすることができ、値のうちの一つが 0
であれば、丸めは行われずに角は四角くなります。

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 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;
値1つで指定する場合:
- 値は
<length>
又は<percentage>
であり、境界の角に使用する円の半径を示します。
値2つで指定する場合:
- 最初の値は
<length>
又は<percentage>
であり、境界の角に使用する楕円の水平の軌道長半径を示します。 - 最初の値は
<length>
又は<percentage>
であり、境界の角に使用する楕円の垂直の軌道長半径を示します。
値
<length-percentage>
- 円の半径又は楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の
<length>
データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
形式文法
<length-percentage>{1,2}ここで
<length-percentage> = <length> | <percentage>
例
ライブ例 | コード |
---|---|
境界として使用されている円弧
|
|
境界として使用されている楕円の弧
|
|
ボックスは正方形。境界として使用されている円弧
|
|
|
ボックスは正方形ではない。境界として使用されている楕円の弧
|
背景色は境界で切り取られる
|
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Backgrounds and Borders Module Level 3 border-top-right-radius の定義 |
勧告候補 | 初回定義 |
初期値 | 0 |
---|---|
適用対象 | すべての要素。ただし、ユーザーエージェントは border-collapse が collapse である場合にtable および inline-table 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 ::first-letter にも適用されます。 |
継承 | なし |
パーセント値 | 境界ボックスの対応する寸法に対する相対値 |
計算値 | 2つの絶対的な length または <percentage> 値 |
アニメーションの種類 | length または パーセント値, calc(); |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
CSS の border-radius に関するプロパティ: 一括指定の border-radius
, 他の角のための border-top-left-radius
, border-bottom-right-radius
, border-bottom-left-radius