title: Bootstrap carousel indicators are square; I want them round
body: <p>I have just successfully set up a 3-image carousel on my site using Bootstrap. This is what it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/xbI0r.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/xbI0r.jpg" alt="enter image description here"></a></p>
  
  <p>If you notice, the indicators are square and I want them to be round! All the tutorials I have followed thus far seem to get it right; I have never seen anyone else's carousel with square indicators. Here's my HTML:</p>
  
  <pre><code>&lt;!-- Carousel start --&gt;
  &lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="bootstrap/img/home-page-banner.jpg"/&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Heading One&lt;/h1&gt;
            &lt;p&gt;Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum &lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-large btn-primary"&gt;Sign up!&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="bootstrap/img/home-page-banner.jpg"/&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Heading One&lt;/h1&gt;
            &lt;p&gt;Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum &lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-large btn-primary"&gt;Sign up!&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="bootstrap/img/home-page-banner.jpg"/&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Heading One&lt;/h1&gt;
            &lt;p&gt;Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum &lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-large btn-primary"&gt;Sign up!&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- Carousel end --&gt;
  </code></pre>
  
  <p>What do you think I am going wrong with here? Is there any class I should be using with the <code>carousel-indicators</code> <code>&lt;ol&gt;</code> that I am not aware of yet?</p>
  
  <p>P.s.: I have already tried <code>.carousel-indicators { border-radius: 100%;}</code> with no success.</p>