This is a rendering issue due to the border CSS on in the .progress class. It is resizing its children elements.
In this case, the height of the .progress-bar element is actually being reduced by 4px due to the 2px border (2px top + 2px bottom), and thus the curvature of the radius isn’t quite the same.
Instead, you can use a box-shadow as it doesn’t resize its children elements.
.progress-bar{
border-top-right-radius: 40px !important;
border-bottom-right-radius: 40px !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.progress{
border-radius: 40px !important;
background-color: white !important;
/* Changes below */
-webkit-box-shadow: inset 0 0 0 2px #337AB7 !important;
-moz-box-shadow: inset 0 0 0 2px #337AB7 !important;
box-shadow: inset 0 0 0 2px #337AB7 !important;
border: none;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>