I'm having trouble trying to add rounded corners to a Bootstrap 3 carousel using CSS. I've managed to round the corners of the images inside the carousel, but for some reason, the background edges of the carousel remain unrounded. Can anyone spot what I might be doing wrong here?
<style type="text/css">
.carousel {
border-radius: 55px 55px 55px 55px;
height: 500px;
margin-bottom: 60px;
margin-top: 40px;
margin-left: 200px;
margin-right: 200px;
}
/* To position the image properly, we need to adjust the caption */
.carousel-caption {
z-index: 10;
}
/* Specify heights due to image positioning */
.carousel .item {
width: 100%;
height: 500px;
background-color: #777;
}
.carousel-inner > .item > 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;
}
</style>
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="30000" data-pause="hover">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<div class="item active">
<img src="images/image3.jpg" alt="Slide 1" />
</div>
<div class="item">
<img src="images/image7.jpg" alt="Slide 2" />
</div>
<div class="item">
<img src="images/image6.jpg" alt="Slide 3" />
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>