Bootstrap carousel indicators are square; I want them round

Question

I have just successfully set up a 3-image carousel on my site using Bootstrap. This is what it looks like:

If you notice, the indicators are square and I wa

Answer 1

For Exact circle please make sure that you have same width and height then it will give you the exact circle with border-radius: 50%;

.carousel-indicators li{
  border-radius:50%
  width:15px;
  height:15px;
  background-color:#aaa;}

Answer 2

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>

Answer 3

You can try this:

.glyphicon-chevron-right:before, .glyphicon-chevron-left:before {
    background-color: #000;
    padding: 5px;
    border-radius: 50%;
}

Answer 4

For Bootstrap 4 I did this in my style sheet:

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