Tailwind CSS rounded-full scaled other corner's radius

Frontend May 28, 2022
The effect that I'm trying to implement

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">

Instead of the expected behaviour, it looks like this:

The actual effect

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...
ISSUE-29: Is there a maximum ‘border-radius’ and what happens then? - Cascading Style Sheets (CSS) Working Group Tracker
CSS Backgrounds and Borders Module Level 3

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