创建遮罩以保持推荐物品的边界半径

Question

我有一个使用Bootstrap 4的证明滑块。每个证明物品角的形状都应使用border-radius保持弯曲。但是，底角不保持border-radius的设置。

我试图从头开始使用jQuery创建一个滑块，但是我得到了相同的效果。有没有一种方法可以创建某种遮罩，以在过渡时产生边界半径效果？可能和::before一起使用？

现在，我已经设法通过将border-radius放在.testimonial-slider .carousel-inner上来达到某种效果，但是由于使用了页边距底部将名称字段推到语音气泡下方，所以同样的效果是不会出现在讲话泡泡的下半部分。我已经附上了代码。请注意，它仅在全屏模式下发生。有没有解决的办法？

.testimonial-slider {
  background-color: #E0F4F5;
  padding-top: 100px;
  padding-bottom: 84px;
}

.testimonial-slider .carousel-inner {
  border-radius: 22px;
}

.testimonial-slider-title {
  text-align: center;
  color: #F69624;
  margin-bottom: 50px;
}

.testimonial-item {
  position: relative;
  background: #fff;
  border-radius: 22px;
}

.testimonial-item .carousel-item {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-weight: 500;
  font-style: italic;
  color: #727272;
  margin-bottom: 0;
}

.testimonial-slider .testimonial-item-bubble {
  background: #fff;
  padding: 40px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}



.carousel-item {
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  color: #727272;
}

.testimonial-caption {
  position: relative;
  left: auto;
  right: auto;
  padding: 0;
  bottom: auto;
}

.carousel-caption h5 {
  color: #238DCC;
}

.carousel-caption p {
  color: #F69624;
  margin-bottom: 34px;
}

.testimonial-indicators li {
  background: rgba(35, 141, 204, 0.38);
  width: 14px;
  height: 14px;
  border-radius: 7px;
  border-top: none;
  border-bottom: none;
}

.testimonial-indicators li.active {
  background: #F69624;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="testimonial-slider">
    <div class="container">
        <div class="row">
            <div class="col-12 offset-lg-2 col-lg-8">

                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">                  
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="testimonial-item-bubble global-shadows">
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, eveniet. Amet iure deserunt voluptatem eligendi voluptas rerum repellendus, similique dolorem tenetur aperiam optio? Deleniti, debitis necessitatibus quidem ex neque voluptatem?</p>
                            </div>  
                            <div class="carousel-caption testimonial-caption d-none d-md-block">
                                <h5>John Smith</h5>
                              
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="testimonial-item-bubble global-shadows">
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, eveniet. Amet iure deserunt voluptatem eligendi voluptas rerum repellendus, similique dolorem tenetur aperiam optio? Deleniti, debitis necessitatibus quidem ex neque voluptatem?</p>
                            </div> 
                            <div class="carousel-caption testimonial-caption d-none d-md-block">
                                <h5>John Smith</h5>
                               
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="testimonial-item-bubble global-shadows">
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, eveniet. Amet iure deserunt voluptatem eligendi voluptas rerum repellendus, similique dolorem tenetur aperiam optio? Deleniti, debitis necessitatibus quidem ex neque voluptatem?</p>
                            </div> 
                            <div class="carousel-caption testimonial-caption d-none d-md-block">
                                <h5>John Smith</h5>
                               
                            </div>
                        </div>
                        <ol class="carousel-indicators testimonial-indicators">
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>