基本的にborder-radiusを短辺の半分を指定すればOKですが、変数を使わないと、ボタンのサイズが変更になるたびに再設定が必要となります。
そんなとき、
border-radius: 9999px;
や、
border-radius: 100vmax;
など、border-radiusに大きな値を入れればボタンの大きさに依存せずに両端が半円のボタンを作成することができます。
DEMO
ただし、
border-radius: 9999px;
だと、短辺が19998pxを超えた時、
border-radius: 100vmax;
だと、短編がビューポートの縦横の長編の倍を超えた時、両端が半円ではなくなります。
