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">
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.
No results for your search, please try with something else.
Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.