ボーダー半径のCSSの問題（パーセント付き）

Question

丸みのある境界線を描こうとしましたができませんでした。

これは実装したい画像です。

背景については無視してください。

これは私がやったCSSコードです。

padding: 10px 25px; 
background: #777777; 
border-radius:50% 50%; 

しかし、結果は以下の通りである。

すべてのヘルプは高く評価されるだろう。

Answer 1

重複する可能性のあるコメントは問題を示唆していますが、解決策を提示していません。

1emを使用すると、枠線の半径が要素に適用される基本のfont-sizeに等しくなります。

私はあなたに5-6 emの値を与えることをお勧めします。この場合、最短時間が50％に達するまで実行され、その後は無効になります。

.btn { 
 
    border: 0; 
 
    background: #ddd; 
 
    border-radius: 6em; 
 
    padding: 8px 12px; 
 
    margin: 5px; 
 
}

<button type="button" class="btn">Button 1</button> 
 
<button type="button" class="btn">Button 2</button> 
 
<button type="button" class="btn">Button 3</button> 
 
<button type="button" class="btn">Button 4</button>