javascript - Bootstrap carousel image out of frame -

i'm having trouble bootstrap carousel. have rounded edges on carousel when image slides, corner of image appears. can't explain words.

here normal , correct carousel image rounded edges.

but when image slides image, goes out of frame , makes solid edge. there way fix using bootstrap 3?

thankyou, ričards.

i believe "solid edges" see semi-transparent "controls". have exaggerated them make effect more apparent. want adjust styling more liking. recommend removing gradient background , using text shadow in stead control stand out.

.carousel {    padding-top: 1em;    padding-bottom: 1em;    width: 350px;    margin: auto;    background-color: transparent;  }    .carousel .item img {    border-radius: 64px;  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous">    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">    <!-- indicators -->    <ol class="carousel-indicators">      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>      <li data-target="#carousel-example-generic" data-slide-to="1"></li>      <li data-target="#carousel-example-generic" data-slide-to="2"></li>    </ol>      <!-- wrapper slides -->    <div class="carousel-inner" role="listbox">      <div class="item active"><img src="http://placehold.it/350x150" alt="..."></div>      <div class="item"><img src="http://placehold.it/350x150" alt="..."></div>      <div class="item"><img src="http://placehold.it/350x150" alt="..."></div>    </div>      <!-- controls -->    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>      <span class="sr-only">previous</span>    </a>    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>      <span class="sr-only">next</span>    </a>    </div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script>