パーセンテージ（％）およびピクセル（px）またはemでのボーダー半径

border-radiusにピクセル値またはem値を使用する場合、値が要素の最大の辺より大きい場合でも、エッジの半径は常に円弧または丸薬の形状になります。

パーセンテージを使用すると、エッジの半径は楕円形になり、要素の各辺の中央から始まり、楕円または楕円形になります。

border-radiusのピクセル値：

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

border-radiusのパーセント値：

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

<div>border-radius:50%;</div>

パーセンテージで表した境界半径が、ピクセルまたはem値で設定された境界半径と同じように機能しないのはなぜですか？

ボーダー半径：

まず、border-radiusプロパティが2つの値を取ることを理解する必要があります。これらの値は、コーナーの形状を定義する4分の1楕円のX / Y軸上の半径です。
値の1つだけが設定されている場合、2番目の値は最初の値と等しくなります。したがって、border-radius: xと同等border-radius:x/x;です。

パーセント値

W3C仕様：CSS背景と境界モジュールレベル3のborder-radiusプロパティを参照すると、これはパーセンテージ値に関して読み取ることができます。

パーセンテージ：境界ボックスの対応する寸法を参照してください。

したがってborder-radius:50%;、楕円のラディを次のように定義します。

• X軸の半径はコンテナの幅の 50％
• Y軸の半径はコンテナの高さの 50％

Pixelとその他のユニット

使用つの値の境界の半径のパーセント以外（CM、ビューポートに関連ユニット、EM ...）を常に同じX / Yの半径を有する楕円をもたらすであろう。言い換えれば、円。

設定border-radius:999px;すると、円の半径は999pxになります。ただし、曲線が重なり、円の半径が最小の辺の半分のサイズに減少する場合は、別のルールが適用されます。したがって、あなたの例では、要素の高さの半分に等しい：50px。

この例（固定サイズの要素を使用）では、pxとパーセンテージの両方で同じ結果を得ることができます。要素は230px x 100pxであるので、（両側の50％）border-radius: 50%;と同等border-radius:115px/50px;です。

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>

最初の値を必要な％で除算するだけです。50％のボーダー半径が必要な場合は、次のように記述します。

border-radius: 25%/50%; 

または別の例：

border-radius: 15%/30%;

あなたは簡単にjsまたはSASSで数学を行うことができます。