How can I maintain the background color of nested progress bars?

Here, I wanted to give border-radius only to the upper and lower right sides of the progress bars. What I'm trying to do is, for example, I have 3 different colored progress bars. Let these colors be red, green and blue. After the radius of the red progress bar is given, the green color should also be seen behind it. Same thing, after giving a radius to the green progress bar, the color of the blue progress bar should continue behind it. Below is an image that explains what I mean more clearly.

.customer-count-container .progress {
  box-shadow: 0px -4px 4px -2px rgba(0, 0, 0, 0.25) inset, 0px 3px 2.8px 0px rgba(255, 255, 255, 0.8) inset;
  overflow: hidden;
}

.customer-count-container .progress .progress-bar:nth-child(1),
.customer-count-container .progress .progress-bar:nth-child(2),
.customer-count-container .progress .progress-bar:nth-child(3) {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="progress" style="width: 35%; height: 10px">
  <div class="progress-bar" style="width: 20%; background-color: var(--red)"></div>
  <div class="progress-bar" style="width: 35%; background-color: var(--green)"></div>
  <div class="progress-bar" style="width: 45%; background-color: #4d7a90"></div>
</div>

Solution

I'd probably make the bars cumulative. That is, each bar adds to the value of the previous. Then you simply need to put radius on all corners.

You'll also need to position them absolutely so they overlay one another, and you'll need to reverse their order (or set appropriate z-index values if document order is important).

Notice that the shadow has been moved to a pseudo-element so it can overlay the bars.

.progress::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px -4px 4px -2px rgba(0, 0, 0, 0.25) inset, 0px 3px 2.8px 0px rgba(255, 255, 255, 0.8) inset;
}

.progress .progress-bar {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="progress position-relative m-2" style="width: 35%; height: 10px">
  <div class="progress-bar" style="width: 100%; background-color: #4d7a90"></div>
  <div class="progress-bar" style="width: 55%; background-color: var(--green)"></div>
  <div class="progress-bar" style="width: 20%; background-color: var(--red)"></div>
</div>