border-radiusプロパティを利用して、要素サイズいっぱいの角丸を作成します。
デモページはこちら

まず正方形にborder-radius: 50%を指定します。正方形の場合はこれで正円になります。

.style01 {
  width: 148px;
  height: 148px;
  border-radius: 50%;
}

次に長方形にborder-radius: 50%を指定します。楕円形になってうまく角丸が作成できません。

.style02 {
  border-radius: 50%;
}

今回の長方形は高さ148pxなので、その半分のborder-radius: 74pxを指定すれば要素サイズいっぱいの角丸が作成できます。74px以上であれば問題ないので、切りよくborder-radius: 80pxを指定します。

.style03 {
  border-radius: 80px;
}

試しにborder-radius: 500pxを指定してみます。見た目に変化はありません。

.style04 {
  border-radius: 500px;
}

問題はテキストが多くなり長方形の高さが高くなった場合です。border-radius: 80pxのままだと要素サイズいっぱいの角丸になりません。

そこでborder-radius: 100vhを指定します。これで長方形の高さの変化に対応して要素サイズいっぱいの角丸が作成できます。縦長の長方形で角丸を左右ではなく上下に作成する場合は、border-radius: 100vwで対応できます。

.style05 {
  border-radius: 100vh;
}