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

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.

Tags

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.