border-top-right-radius

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

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

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

構文

/* 角を円にする */
/* 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;
}

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

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