rounded-full prevents other rounding sizes from functioning on element

[zolrath]

Hello!
When attempting to create a button that is rounded-full but with a single, less round corner via rounded-br-lg I am not seeing the behavior I'd expect given the rest of the composability of tailwind.

rounded-full sets border-radius: 9999px and it seems the only way to approximate rounded-br-lg was to add border-bottom-right-radius: 3500px

[estevanmaito]

As per the CSS Border spec https://www.w3.org/TR/css-backgrounds-3/#corner-overlap

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap

That's why you needed to add 3500px to start seeing something: proportionally reduce

So the only way to preciselly give border-radius to an element, like your case, with different radii, is to do it manually.

An example: for this button with .h-10 (height: 2.5rem), the maximum allowed border size, until they start to overlap is 1/2, or 1.25rem.

<button class="h-10 px-6 bg-indigo-200 text-indigo-900 btn">Lorem ipsum</button>

.btn {
  border-radius: 1.25rem 1.25rem .5rem 1.25rem;
}

I don't know if would be possible for Tailwind to provide different rounded border utilities given the amount of sizes an element could have (taking into account height, padding, line-height, etc.)