Создать маску для поддержания границы-радиуса предмета

Question

У меня есть слайдер с характеристиками, использующий Bootstrap 4. Форма углов каждого элемента с характеристиками должна оставаться изогнутой, используя border-radius.Однако нижние углы не поддерживают настройку border-radius.

Я попытался создать слайдер с помощью jQuery с нуля, но у меня тот же эффект.Есть ли способ создать какую-то маску, чтобы дать эффект border-radius при переходе?Возможно, с помощью ::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>