Search code examples
htmlcsstwitter-bootstrap-3progress-bar

Bootstrap progress bar custom border radius

I have the following snippet : 

.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;
    -webkit-box-shadow: none !important;
	  -moz-box-shadow: none !important;
	  box-shadow: none !important;
    border: 2px solid #337AB7;
}
<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>

I don't understand why I have the white space on the left, I would like to get rid of it.

White space

Solution

  • 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>