cannot remove border in bootstrap progress bar - html

Question

I have started to create bootstrap progress bar with custom colors etc. however there appears grey border above progress bar and I am unable to understand where this border comes from and how to remove it.
CSS:
.progress-info {
color: #ffffff;
}
.progress-info {
padding-top: 34px;
background-color: #005861;
}
.progress {
background-color: #F3723F;
border: 5px solid #F3723F;
border-radius: 4px;
height: 18px;
}
.progress-second {
background-color: #45BDA1;
border: 5px solid #45BDA1;
}
Html:
<div class="progress-info" data-bind="with: $data.statistics">
<div class="row">
<div class="col-md-4">Your score</div>
<div class="progress col-md-6">
<div class="progress-bar progress-bar-score" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-bind="style: {width: $data.score}" style="width: 6%;"></div>
</div>
<div class="col-md-2" data-bind="text: $data.score">6%</div>
</div>
<div class="row">
<div class="col-md-4">Progress</div>
<div class="progress progress-second col-md-6">
<div class="progress-bar progress-bar-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-bind="style: {width: $data.score}" style="width: 6%;"></div>
</div>
<div class="col-md-2"><span data-bind="text: $data.success_cnt">2</span> / <span data-bind="text: $data.attempts">35</span>
</div>
</div>
</div>
JsFiddle

Answer 1

That is not a border. It is a box-shadow. You only need to give box-shadow: none; to the .progress.
Jsfiddle
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: none;
}