仕様

border-radius<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
一括/個別一括指定プロパティ
初期値0
適用対象すべての要素 (border-collapseが折りたたまれている場合を除く)
継承なし
百分率境界ボックスの対応する寸法を参照
計算値計算された<length-percentage>値の ペア
補足１最初の値は水平半径、2番目の値は垂直半径です。
補足２<length-percentage> = <length> | <percentage>
補足３border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius も値が１組みの個別指定プロパティなだけで他は同じ

border-radius プロパティは、要素の境界線の外側の角を丸めるの左上(border-top-left-radius), 右上(border-top-right-radius), 右下(border-bottom-right-radius), 左下(border-bottom-left-radius) の値を単一の宣言で設定する一括指定プロパティです。
順番に意味があり指定する数にも意味があります。

左上，右上，右下，左下で一部を初期値などにしたい場合は、
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius 等を用います。
値は左上，右上，右下，左下に個別の指定で値が１組みであるだけで、border-radius と同じ規則です。

2番目の値の数

"/"(スラッシュ)の前後に値が指定されている場合、スラッシュの前の値は水平半径を設定し、スラッシュの後の値は垂直半径を設定します。スラッシュの前の値は省略不可で、スラッシュの後の値はスラッシュ込みで省略可です。

  1. cdvSample520 > div { border: solid 1px; height: 10em; }
  1. <div class="cdvSample520">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。
境界の線種の指定は、線種の初期値が none でそのままでは境界がないので記述しています。

  1. border-radius: 1em / 2em 3em 4em 5em;

2番目の値を４つ指定しました。値は 左上，右上，右下，左下 で設定されます。最初の値は水平半径、2番目の値は垂直半径です。

  1. border-radius: 1em / 2em 3em 4em;

2番目の値を3つ指定しました。値は 左上，右上と左下，右下 で設定されます。最初の値は水平半径、2番目の値は垂直半径です。

  1. border-radius: 1em / 2em 3em;

2番目の値を2つ指定しました。値は 左上と右下，右上と左下 で設定されます。最初の値は水平半径、2番目の値は垂直半径です。

  1. border-radius: 1em / 2em;

2番目の値を1つ指定しました。値は 左上と右上と右下と左下 で設定されます。最初の値は水平半径、2番目の値は垂直半径です。

1番目の値の数

"/"(スラッシュ)の前後に値が指定されている場合、スラッシュの前の値は水平半径を設定し、スラッシュの後の値は垂直半径を設定します。スラッシュの前の値は省略不可で、スラッシュの後の値はスラッシュ込みで省略可です。

  1. cdvSample530 > div { border: solid 1px; height: 3em; }
  1. <div class="cdvSample530">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。
境界の線種の指定は、線種の初期値が none でそのままでは境界がないので記述しています。

  1. border-radius: 2em 3em 4em 5em / 1em;

1番目の値を４つ指定しました。値は 左上，右上，右下，左下 で設定されます。最初の値は水平半径、2番目の値は垂直半径です。

  1. border-radius: 2em 3em 4em / 1em;

1番目の値を3つ指定しました。値は 左上，右上と左下，右下 で設定されます。最初の値は水平半径、2番目の値は垂直半径です。

  1. border-radius: 2em 3em / 1em;

1番目の値を2つ指定しました。値は 左上と右下，右上と左下 で設定されます。最初の値は水平半径、2番目の値は垂直半径です。

  1. border-radius: 2em / 1em;

1番目の値を1つ指定しました。値は 左上と右上と右下と左下 で設定されます。最初の値は水平半径、2番目の値は垂直半径です。

値の数

"/"(スラッシュ)がない場合、値は水平半径と垂直半径の両方の半径を等しく設定します。

  1. cdvSample520 > div { border: solid 1px; height: 10em; }
  1. <div class="cdvSample520">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。
境界の線種の指定は、線種の初期値が none でそのままでは境界がないので記述しています。

  1. border-radius: 1em 2em 3em 4em;

値を４つ指定しました。値は 左上，右上，右下，左下 で設定されます。値は水平半径，垂直半径を等しく設定します。

  1. border-radius: 1em 2em 3em;

値を3つ指定しました。値は 左上，右上と左下，右下 で設定されます。値は水平半径，垂直半径を等しく設定します。

  1. border-radius: 1em 2em;

値を2つ指定しました。値は 左上と右下，右上と左下 で設定されます。値は水平半径，垂直半径を等しく設定します。

  1. border-radius: 1em;

値を1つ指定しました。値は 左上と右上と右下と左下 で設定されます。値は水平半径，垂直半径を等しく設定します。

<length> 値

  1. cdvSample530 > div { border: solid 1px; height: 3em; }
  1. <div class="cdvSample530">
  2. <div style="font-size: 2em;">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
境界の線種の指定は、線種の初期値が none でそのままでは境界がないので記述しています。フォントサイズは、幅の記述する単位にフォントサイズがあるのでその確認の為の記述です。

例
  1. border-radius: 1em;
  2. font-size: 2em;

単位 em の値を指定しました。em は、font-size の計算値を用います。

例
  1. border-radius: 1.6rem;
  2. font-size: 2em;

単位 rem の値を指定しました。rem は、ルート要素の font-size の計算値を用います。
(html { font-size: 62.5%; } body { font-size: 1.6em; } で、body からそのまま継承している状態で提示しています。)

例
  1. border-radius: 16px;
  2. font-size: 2em;

単位 px の値を指定しました。px は、1 ピクセルです。

例
  1. border-radius: 1vw;
  2. font-size: 2em;

単位 vw の値を指定しました。vw は、ビューポートの初期値の包含ブロックにおける幅の1%と同じです。

例

<percentage> 値

境界ボックスの対応する寸法に対する割合

  1. cdvSample530 > div { border: solid 1px; height: 3em; }
  1. <div class="cdvSample530">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。
境界の線種の指定は、線種の初期値が none でそのままでは境界がないので記述しています。

  1. border-radius: 50%;

単位 % の値を指定しました。% は、境界ボックスの対応する寸法に対する割合です。

CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティ(border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius)を使用して設定します。

  1. cdvSample570 > div { padding: 0.5em; border: solid; border-radius: 1em; }
  2. cdvSample570 > div > div { border-style: solid; }
  1. <div class="cdvSample051">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素の境界の記述は、継承の確認の為に記述しています。

親
子
  1. border-radius: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. border-radius: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。border-radius プロパティの初期値は 0 です。

親
子
  1. border-radius: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。border-radius プロパティは非継承プロパティなので初期値の 0 を設定します。

親
子

接点

  1. cdvSample530 > div { border: solid 1px; height: 3em; }
  1. <div class="cdvSample530">
  2. <div style="border-width: 1em 0 0 1em;"></div></div>

例示の雛型です。style属性を書き換えて例示しています。
境界の線種の指定は、線種の初期値が none でそのままでは境界がないので記述しています。

  1. border-top-left-radius: 2em;
  2. border-width: 1em 0 0 1em;

半径を境界の幅より大きい値で指定しました。境界の内側の半径は、境界の外側の半径から対応する境界の太さを引いたものです。

  1. border-top-left-radius: 1em;
  2. border-width: 2em 0 0 2em;

半径を境界の幅より大きい値で指定しました。境界の内側の半径は、境界の外側の半径から対応する境界の太さを引いたものです。負の値の場合は内側の半径は 0 です。

  1. border-top-left-radius: 3em;
  2. border-width: 1em 0 0 2em;

半径を境界の幅より大きい値で指定しました。境界の内側の半径は、境界の外側の半径から対応する境界の太さを引いたものです。

  1. border-top-left-radius: 2em;
  2. border-width: 1em 0 0 2em;

半径を境界の幅より大きい値で指定しました。境界の内側の半径は、境界の外側の半径から対応する境界の太さを引いたものです。負の値の場合は内側の半径は 0 です。

  1. border-top-left-radius: 3em;
  2. border-width: 1em 0 0 2em;
  3. border-color: #ff0000 #0000ff;

半径を境界の幅より大きい値で指定しました。境界の内側の半径は、境界の外側の半径から対応する境界の太さを引いたものです。

  1. border-top-left-radius: 3em;
  2. border-width: 1em 0 0 2em;
  3. border-style: solid double;

半径を境界の幅より大きい値で指定しました。境界の内側の半径は、境界の外側の半径から対応する境界の太さを引いたものです。