rounded-full stops other radii from working

[hfournier]

What version of Tailwind CSS are you using?

4.1.7

What build tool (or framework if it abstracts the build tool) are you using?

Astro

What version of Node.js are you using?

v22.11.0

What browser are you using?

Brave, Edge and Firefox Dev

What operating system are you using?

Windows 11 ARM

Reproduction URL

https://play.tailwindcss.com/kYnZBxXbZm

Describe your issue

If I set:

<div class="size-48 rounded-l-full rounded-r-2xl bg-lime-500">

the left side of the div will be fully rounded, but the right side is square. It doesn't matter which side or corner you pick, if you set rounded-*-full, the other corners will not be rounded at all regardless of what you set them to (except full).

Discovered the issue on an <input type="file" />, so I included one of those as well. Shows that it's not limited to a certain html element.

[wongjn]

This is unfortunately how CSS works and not really much Tailwind can do about it, see:

• Rounded-[SIDE]-full not playing well with others #17297 (comment)
• Different left/right border radius classes not applying correctly #16902 (comment)

To workaround this CSS quirk, consider setting the larger border-radius to half of the element height: https://play.tailwindcss.com/lPy44c3slc

[hfournier]

Weird that I've never stumbled onto this odd behavior before.

What's interesting is if you start with:

<div class="size-48 rounded-l-[--spacing(24)] rounded-r-2xl bg-lime-500"></div>

as you suggested, and incrementally increase the spacing number, you can see the corners on the right side slowly getting more and more square. So they're still rounded, but lese and less so.