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:

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */


/* 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-control.right,
.carousel-control.left,
.carousel .item,
.carousel-inner,
.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;
}