在这里，我想只给进度条的右上方和右下方提供border-radius.我try 做的是，例如，我有3个不同 colored颜色 的进度条.让这些 colored颜色 是红色，绿色和蓝色.在红色进度条的半径给定后，绿色的 colored颜色 也应该在它后面看到.同样的，在给绿色进度条一个半径后，蓝色进度条的 colored颜色 应该在它后面继续.下面是一个图像，更清楚地解释了我的意思.
.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>