title: Rounding Bootstrap 3 Carousel Corners
body: <p>I am trying to style a Bootstrap 3 carousel with CSS to have rounded corners. I am able to round the corners of the images in the carousel, but for some reason the background carousel edges remain unrounded. What am I doing wrong here?<img src="https://i.stack.imgur.com/FOAGY.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .carousel {
      border-radius: 55px 55px 55px 55px;
      height: 500px;
      margin-bottom: 60px;
      margin-top: 40px;
      margin-left: 200px;
      margin-right: 200px;
  }
  /* Since positioning the image, we need to help out the caption */
   .carousel-caption {
      z-index: 10;
  }
  /* Declare heights because of positioning of img element */
   .carousel .item {
      width: 100%;
      height: 500px;
      background-color: #777;
  }
  .carousel-inner &gt; .item &gt; img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 500px;
  }
  @media (min-width: 768px) {
      .carousel-caption p {
          margin-bottom: 20px;
          font-size: 21px;
          line-height: 1.4;
      }
  }
  img {
      border-radius: 55px 55px 55px 55px;
  }
  &lt;/style&gt;
  
  &lt;div id="carousel" class="carousel slide" data-ride="carousel" data-interval="30000" data-pause="hover"&gt;
      &lt;!-- Menu --&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#carousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#carousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#carousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Items --&gt;
      &lt;div class="carousel-inner"&gt;
  
          &lt;div class="item active"&gt;
              &lt;img src="images/image3.jpg" alt="Slide 1" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/image7.jpg" alt="Slide 2" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/image6.jpg" alt="Slide 3" /&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
      &lt;a href="#carousel" class="left carousel-control" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a href="#carousel" class="right carousel-control" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>