border-top-right-radius

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

丸みは円または楕円にすることができ、値のうちの一つが 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;

値１つで指定する場合:

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

値２つで指定する場合:

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

値

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

形式文法

<length-percentage>{1,2}ここで
<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`
適用対象	すべての要素。ただし、ユーザーエージェントは `border-collapse` が `collapse` である場合に`table` および `inline-table` 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 `::first-letter` にも適用されます。
継承	なし
パーセント値	境界ボックスの対応する寸法に対する相対値
計算値	２つの絶対的な `length` または `<percentage>` 値
アニメーションの種類	length またはパーセント値, calc();

ブラウザーの対応

BCD tables only load in the browser

border-top-right-radius

構文

値

形式文法

例

仕様書

ブラウザーの対応

関連情報