htmlcsscarouselbootstrap-5border-radius

Rounded Corners of Carousel Images with Bootstrap 5

Only the corners on the left side of the carousel images are rounded, and during the sliding animation those corners also become pointed again.

Screenshot of carousel image while static, displaying both rounded and pointed corners.

#carouselCoulumn1Neutral {
  padding-left: 40px;
  padding-top: auto;
  padding-right: 20px;
  padding-bottom: auto;
}

#carouselAboutNeutral {
  background-color: lightgrey;
  border-radius: 10px;
  padding: 5px;
}

#carouselImagesNeutral {
  max-height: 100%;
  border-radius: 10px;
}
<div class="row">

  <div class="col-sm-7" id="carouselCoulumn1Neutral">
    <div class="carousel slide" data-bs-ride="carousel" id="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <!-- <img src="Images/LianaMikah1.jpg" alt="LianaMikah1" id="carouselImagesNeutral"> -->
          <div style="background-color:pink;" id="carouselImagesNeutral">
        <p>Pink</p>
        </div>
        </div>
        <div class="carousel-item">
          <!-- <img src="Images/LianaMikah7.jpg" alt="LianaMikah7" id="carouselImagesNeutral"> -->
          <div style="background-color:blue;" id="carouselImagesNeutral">
        <p>Blue</p>
        </div>
        </div>
        <div class="carousel-item">
          <!-- <img src="Images/LianaMikah8.jpg" alt="LianaMikah8" id="carouselImagesNeutral"> -->
          <div style="background-color:green;" id="carouselImagesNeutral">
        <p>Green</p>
        </div>
        </div>
      </div>
      <!-- Left and right controls/icons -->
      <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
  <span class="carousel-control-prev-icon"></span>
  </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
  <span class="carousel-control-next-icon"></span>
  </button>
    </div>
  </div>
  <!-- <div class="col-sm-4" id="carouselCoulumn2Neutral">
    <div id="carouselAboutNeutral">
      <h3>About Carousel</h3>
      <p>Something about the carousel</p>
    </div>
  </div> -->

</div>

Ideally, I would like for the corners to be consistently rounded. I am unsure of how to achieve this.

Edited: After adding the code snippet I have found that all four corners of the div are rounded, however, the corners still become pointed during the sliding animation.

Solution

  • As mentionned in my comment, simply add the rounded class to the element with the carousel-inner class.

    With Bootstrap 5, you have 5 different sizes of rounded corners that are pre-defined: rounded-1, rounded-2, etc.

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="p-3">
  <div id="carouselExample" class="carousel slide">
    <div class="carousel-inner rounded-5">
      <div class="carousel-item active">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>