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 right radius simply disappears. Therefore I dive in the source code, finding that
rounded-l-full was implemented as follows:
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
In the specification, all the radius will be multiplied by a factor to make all the border-radius fit.