While working with Bootstrap 5.3, I encountered an issue where the corners of my carousel display as rounded, then sharp, and back to rounded during transitions. The problem is quite literally in the title.
What is shown right after transition:
https://i.sstatic.net/XYGjO.jpg
What it turns into (and should remain as):
https://i.sstatic.net/7ISjF.jpg
I have exhausted all options by checking for missing div tags, referencing documentation, searching on StackOverflow, and even adding inline styles like
style=“border-radius:2rem!important”A snippet of the custom styles.css that includes some but not all CSS rules:
<style>
.text {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
font-size: 10px;
}
/* Other CSS rules go here */
</style>
html
<div class="container">
<!-- Content -->
<!-- Carousel wrapper -->
<div id="carouselMaterialStyle" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
<!-- Carousel items and controls omitted for brevity-->
</div>
<!-- Inner -->
<!-- Carousel wrapper -->
</div>