Use a finite radius for rounded-full

[yudin-s]

Summary

Fixes #20125.

rounded-full currently emits calc(infinity * 1px). When production optimization runs through Lightning CSS, that value is serialized as an extremely large finite pixel value, which can cause rendering issues in some engines.

This switches the built-in fallback for rounded-full to 9999px, while still allowing users to override it with --radius-full in their theme.

Test plan

• pnpm exec vitest run packages/tailwindcss/src/utilities.test.ts -t rounded
• pnpm exec vitest run packages/tailwindcss/src/utilities.test.ts
• pnpm exec prettier --check packages/tailwindcss/src/utilities.ts packages/tailwindcss/src/utilities.test.ts
• git diff --check
• pnpm build

[greptile-apps]

Confidence Score: 5/5

This is a safe, minimal one-line fix with well-understood behavior; 9999px is the established Tailwind v3 convention and poses no practical risk.

The change touches exactly one static value used by all rounded-corner utilities, the test snapshot is updated to match, and the --radius-full theme-override path is untouched. The fix is consistent with how Tailwind CSS v3 handled this value, and no other files in the package retained the old infinity expression.

No files require special attention.

_{Reviews (1): Last reviewed commit: "fix: use finite radius for rounded-full" | Re-trigger Greptile}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: bde88a9a-4543-4e42-9020-0aae4ad2bb75

📥 Commits

Reviewing files that changed from the base of the PR and between 829cdc9 and 7d2294a.

📒 Files selected for processing (2)

• packages/tailwindcss/src/utilities.test.ts
• packages/tailwindcss/src/utilities.ts

---

Walkthrough

This PR updates the rounded-full utility in Tailwind CSS to use a practical fixed border-radius value instead of a calculated infinity expression. The implementation in utilities.ts changes from calc(infinity * 1px) to 9999px, and the test expectation in utilities.test.ts is updated to match, changing from the extremely large resulting value of 3.40282e38px to 9999px.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Use a finite radius for rounded-full' directly and clearly describes the main change in the pull request.
Description check	✅ Passed	The description is directly related to the changeset, explaining the problem (infinite radius causing rendering issues), the solution (using 9999px), and providing test instructions.
Linked Issues check	✅ Passed	The PR directly addresses issue #20125 by replacing the out-of-bounds infinite radius value with a finite 9999px fallback, meeting the core requirement to fix rendering issues.
Out of Scope Changes check	✅ Passed	All changes are narrowly scoped to fixing the rounded-full utility radius value as required by issue #20125, with no unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[RobinMalfait]

Hey! Going to keep calc(infinity * 1px) for now since this is the right intent compared to guessing a big number.