Bootstrap Carousel border-radius

https://sendvid.com/cfcewqaj

In the video above, you can see when the carousel slides from one image to another, the rounded corners temporarily disappear. Is there anyway to prevent that?

CSS

.carousel, .slide,
.carousel .carousel-inner,
.carousel .carousel-item,
.carousel .carousel-item img,
.carousel .carousel-control {
  border-radius: $12;
  overflow: hidden;
}

HTML

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img src="/img/1.jpeg" alt="...">
                <div class="carousel-caption">
                    <h3>Unsplash</h3>
                    <p>This is a photo from unsplash.com</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/img/2.jpeg" alt="...">
                <div class="carousel-caption">
                    <h3>Unsplash</h3>
                    <p>This is a photo from unsplash.com</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/img/5.jpeg" alt="...">
                <div class="carousel-caption">
                    <h3>Unsplash</h3>
                    <p>This is a photo from unsplash.com</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/img/4.jpeg" alt="...">
                <div class="carousel-caption">
                    <h3>Unsplash</h3>
                    <p>This is a photo from unsplash.com</p>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="icon-prev" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="icon-next" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>