Bootstrapグリッドシステムのモバイル環境で、 border-radiusが下側効かない

Bootstrap(5.0.0beta）のグリッドシステムを使ってモバイル環境で表示するときに画像の下側が、border-radiusが効かないです。

角になっています。

http://spiritualcompany.net/portfolio/site1/index.html

の「ここアップは、皆さんの売り上げアップに貢献していきます。」
の下にある画像3つです。

大きな画面では、角丸になるのですが、検証でモバイル環境にすると下側が角のままです。

html
1 <div class="container-fluid forth">
2      <div class="row">
3        <h2 class="forth-title">ここアップは、皆さんの売り上げアップに貢献していきます。</h2>
4      </div>
5      <div class="row forth-row">
6        <div class="col-md-7">
7          <img src="img/6.jpg" alt="保障" class="img-fluid ">
8        </div>
9        <div class="col-md-5 forth-right">
10          <i class="fas fa-shield-alt fa-3x"></i>
11          <h2>1年間成果保障</h2>
12          <p>お申込み頂いてから、1年間成果
13            出なかった場合には、全額返金致します。
14          </p>
15          <a href="#">1年間成果保障の詳細</a>
16        </div>
17      </div>
18
19      <div class="row forth-row">
20        <div class="col-md-6">
21          <img src="img/7.jpg" alt="保障" class="img-fluid">
22        </div>
23        <div class="col-md-6 forth-right">
24          <i class="fas fa-address-card fa-3x"></i>
25          <h2>直接面談</h2>
26          <p>直接面談により、御社にあった売上アップ の方法をカスタマイズし提供します。
27          </p>
28          <a href="#">直接の面談によるサポートの詳細</a>
29        </div>
30      </div>
31
32      <div class="row forth-row">
33        <div class="col-md-6">
34          <img src="img/8.jpg" alt="保障" class="img-fluid">
35        </div>
36        <div class="col-md-6 forth-right">
37          <i class="fas fa-laptop fa-3x"></i>
38          <h2>オンラインツール</h2>
39          <p>オンラインツールにより、売り上げアップサポート を行っていきます。
40          </p>
41          <a href="#">オンラインツールの詳細</a>
42        </div>
43      </div>
44
45    </div><!--end of forth-->
46

CSS
1
2.forth img{
3    border-radius: 10%;
4    padding-bottom: 20px;
5    /*max-width:80%;*/
6}
7
8.forth i{
9    padding-top: 30px;
10    padding-bottom: 20px;
11}
12
13.forth a{
14    color: white;
15}
16
17.forth a:hover{
18    color:white;
19    text-decoration: underline;
20}