The left corners of the carousel images are rounded, but during the sliding animation, they become pointed again.
https://i.sstatic.net/syoPk.png
#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>I want all corners of the div to be consistently rounded, not just the left ones. I'm not sure how to achieve this.
Update: After adding the code snippet, I noticed that all four corners of the div are rounded, but they still become pointed during the sliding animation.