I am trying to create this progress bar, but struggle since it has border-radius AND a different border color for each sub-progress element.

Anyone has any idea how this can be implemented?
[![enter image description here](https://i.stack.imgur.com/ROjTW.png)](https://i.stack.imgur.com/ROjTW.png)

This is what I achieved so far, which doesn't include border:
[Codepen](https://codepen.io/anatel/pen/GRZGjBQ)

```css
body {
  display: flex;
  justify-content: center;
}

.progress-bar {
  height: 24px;
  width: 280px;
  background: #eaeaea;
  border-radius: 16px;
  display: flex;
  overflow: hidden;
}

.progress-bar-fill-1 {
  width: 30%;
  background: #F16172;
  box-sizing: border-box;
  border-right: 1px solid white;
}

.progress-bar-fill-2 {
  width: 20%;
  background: #31C4F3;
  box-sizing: border-box;
  border-right: 1px solid white;
}
```

```html
<div class="progress-bar">
  <div class="progress-bar-fill-1"></div>
  <div class="progress-bar-fill-2"></div>
</div>
```

If I try to add a border to `.progress-bar-fill-1` for example, It doesn't appear on the corners.
[![enter image description here](https://i.stack.imgur.com/htTao.png)](https://i.stack.imgur.com/htTao.png)

**Notice that I don't know the percentage values in advance, so I can't solve the problem by adding `border-radius` to the first progress element.**

Thanks