Tailwind CSS rounded-full scaled other corner's radius

When using Tailwind CSS trying to achieve the effect above, I encountered an issue that the following code won't work:

  <div class="relative h-16 w-full bg-slate-400 rounded-l-full rounded-r-3xl">
  </div>

Instead of the expected behaviour, it looks like this:

The right radius simply disappears. Therefore I dive in the source code, finding that rounded-l-full was implemented as follows:

.rounded-l-full {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

Seems that setting the radius to 9999px broke what was expected. After many checking on the internet, I came up with this Stack Overflow question and found a w3 issue and it was documented as follows

Using a CSS border-radius much larger than an elements dimensions

Is there any issue with using a border-radius that is much larger than an element’s dimensions? For example, if I wanted to make a class .circle like so: .circle { -webkit-border-radius: 1000...

Stack Overflowfrshca

ISSUE-29: Is there a maximum ‘border-radius’ and what happens then? - Cascading Style Sheets (CSS) Working Group Tracker

Cascading Style Sheets (CSS) Working Group Tracker

CSS Backgrounds and Borders Module Level 3

W3CBert Bos

In the specification, all the radius will be multiplied by a factor to make all the border-radius fit.