Как частично использовать радиус границы с фактической границей в индикаторе выполнения ⇐ CSS

[Anonymous]

У меня есть несколько сегментов на индикаторе выполнения, в этом примере представляющие два состояния — достигнутые и запланированные значения. Запланированный сегмент должен иметь границу, и ближе к концу индикатора выполнения он должен получить тот же радиус границы, что и фон.
Моя проблема заключается в следующем. Либо радиус также виден внутри индикатора выполнения, либо я не использую радиус границы для правого угла и использую переполнение: скрыто; чтобы "отрезать" ненужную, переполняющую часть сегмента, но тогда я теряю границу по радиусу.
Сложно объяснить, изображения, наверное, лучше.
Это мой текущий результат:


По сути, я хочу, чтобы это выглядело именно так. Возможно ли это с помощью достаточно простого решения?
как? (img)

Код: Выделить всё

.progress-bar {
position: relative;
height: 40px;
width: 400px;
background: lightgray;
border-radius: 24px;
.segment {
position: absolute;
height: 40px;
box-sizing: border-box;
&:first-of-type {
border-radius: 24px 0 0 24px;
width: 70%;
background: blue;
}
&:last-of-type {
left: 70%;
width: 28%;
background: lightblue;
border: 1px solid blue;
}
}
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/790 ... ogress-bar