Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Kristina Petravičiūtė
Kristina Petravičiūtė
11,270 Points

Border-radius for bootstrap carousel

Hi, maybe someone can help me? I have an issue then my carousel is sliding (border radius is not applying).

This is that I get then images start sliding: http://we.tl/aBWjJal01b

Here is my HTML code:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="first-slide" src="img/substitute.jpg" alt="First slide"> <div class="container"> <div class="carousel-caption"> <p>Substitute</p> <h1>Rita <b>Domkutė</b></h1> <p>02.21 - 02.28</p> </div> </div> </div> <div class="item"> <img class="second-slide" src="img/substitute.jpg" alt="Second slide"> <div class="container"> <div class="carousel-caption"> <p>Substitute</p> <h1>Rita <b>Domkutė</b></h1> <p>02.21 - 02.28</p> </div> </div> </div> <div class="item"> <img class="third-slide" src="img/substitute.jpg" alt="Third slide"> <div class="container"> <div class="carousel-caption"> <p>Substitute</p> <h1>Rita <b>Domkutė</b></h1> <p>02.21 - 02.28</p> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="sr-only">Next</span> </a> </div><!-- /.carousel -->

And CSS:

-------------------------------------------------- */

/* Carousel base class */

.carousel {
  height: 298px;
  margin-top: 39px;

/* Since positioning the image, we need to help out the caption */

.carousel-caption {
  z-index: 10;
  text-align: left;
  left: 55%;
  padding-bottom: 67px;

.carousel-caption h1 {
    font-size: 29px;
    line-height: 25px;
    margin-top: 10px;
    margin-bottom: 5px;

.carousel-caption p:first-child {
    font-size: 15px;

.carousel-caption p:last-child {
    font-size: 13px;

.carousel .item,
.carousel-inner > .item > img {
    border-radius: 10px;

/* Declare heights because of positioning of img element */

.carousel .item {
  height: 298px;

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 298px;

.carousel-indicators {
    bottom: 0;

.carousel-indicators li {
    background-color: #e2e2e2;