rounded-l-full rounded-r-md together doesn't work

[Elfayer]

What version of Tailwind CSS are you using?

For example: v4.0.6

What browser are you using?

Chrome & Firefox

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/NBr28CWOVg

Describe your issue

When applying rounded-l-full rounded-r-md together, the right border rounded doesn't apply. While rounded-l-3xl rounded-r-md does.

[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/Z48VD14uAr