Bootstrap carousel indicators are square; I want them round

Add border-radius:

.carousel-indicators > li {
  border-radius: 50%;
}

Note that you have to target the li tags within the carousel-indicators class and also do 50% not 100%.

So you don't have to use !important to override the default border-radius:

#myCarousel-indicators > li {
  border-radius: 50%;
}

<ol id="myCarousel-indicators" class="carousel-indicators"></ol>

#myCarousel-indicators li{
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

.carousel-indicators li{
    border-radius: 50%;
    width: 12px;
    height: 12px;
}
<ol id="myCarousel-indicators" class="carousel-indicators"></ol>

For Bootstrap 4 I did this in my style sheet:

.carousel-indicators li {
    border-radius: 12px;
    width: 12px;
    height: 12px;
    background-color: #404040;
}

For Bootstrap 5, styling changed a little. I was able to achieve round indicators mixing SCSS variables with a css style:

This sets indicadors square, instead of rectanglular

$carousel-indicator-width: 10px;
$carousel-indicator-height: 10px;

This rounds the corners

.carousel .carousel-indicators button {
    border-radius: 50%;
}

Tags:

Html

Css