I’m looking to produce the equivalent of what a “negative border radius” would look like. I have 2 goal bars that work towards each other.

Here’s what I currently have

I’m looking for the right bar to look like this

Here’s the current code of the right bar:

<div style="position: relative; background-color: transparent; width: 620px; height: 50px; transform: translate(0%, 0%); transform: rotate(180deg);">
  <div style="position: absolute; background: green; border-radius: 50px; width: 270px; height: 50px; overflow: hidden; padding: 2px;"></div>
  <p style="position: absolute; font-family: 'Bubblegum Sans'; font-size: 26px; color: white; white-radius: nowrap; text-shadow: 3px 3px #000000, 5px 5px #000000, 7px 7px #000000; margin: auto; transform: translate(-50%, -50%);"></p>
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 30px; background-color: {BACKGROUND_COLOR}; content: ''; transform: inset(2px 2px 2px 2px);"></div>
</div>

How can I achieve the concave effect on the left side of this bar?

I’ve tried messing with inset, but my experience in coding is limited.