CSS image-background of child element showing above image-border - html

Question

I have the following markup:
<div id="carousel-is-sl-for-me" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-is-sl-for-me" data-slide-to="0" class="active">
<li data-target="#carousel-is-sl-for-me" data-slide-to="1">
<li data-target="#carousel-is-sl-for-me" data-slide-to="2">
<li data-target="#carousel-is-sl-for-me" data-slide-to="3">
<li data-target="#carousel-is-sl-for-me" data-slide-to="4">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url('<?php bloginfo('template_url'); ?>/image/carousel-placeholder-01.jpg');">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="panel panel-info">
<div class="panel-heading">1 in 4 people</div>
<div class="panel-body">
<p>...text goes here</p>
<a href="#" class="btn btn-primary">
<span class="glyphicon glyphicon-file"></span>
Download PDF
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-is-sl-for-me" 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-is-sl-for-me" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Notice how .item has a background applied to it as an inline style.
Then, in my CSS I have the following CSS border:
#carousel-is-sl-for-me {
border-image-slice: 15 27 15 27;
border-image-width: 15px 15px 15px 15px;
border-image-repeat: repeat repeat;
border-image-source: url('../image/marker-border-image-white-big-reversed.png');
border-style: solid;
}
However, the image background of the .item is hiding the image border of #carousel-is-sl-for-me:
Seeing as #carousel-is-sl-for-me is the parent element, I would have thought it's image borders would have been on top? Here is how they should look (if I hide the image background):
Is there an easy way to get around this?