Skip to content

Commit 400f03e

Browse files
dogmarclaude
andauthored
docs: explain @supports fallback behavior in README (#24)
## Summary - Adds a paragraph to the "What it does" section explaining that the radius correction is wrapped in `@supports`, so browsers without `corner-shape` support use the original border-radius unchanged - Highlights that this gives consistent visual corners regardless of browser support ## Test plan - [ ] Read the README and confirm the explanation is clear 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent fd48f49 commit 400f03e

1 file changed

Lines changed: 2 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ const twMerge = extendTailwindMerge(squircleMergeConfig, {
4141

4242
CSS `corner-shape: superellipse()` makes corners follow a superellipse curve instead of a circular arc. But at the same `border-radius` value, superellipse corners look visually smaller. This package auto-adjusts the radius so `squircle-lg` visually matches `rounded-lg`.
4343

44+
The adjusted radius is wrapped in a `@supports (corner-shape: superellipse(2))` rule, so browsers without support simply use the original `border-radius` unchanged. This means your corners will look visually consistent regardless of browser — no sudden changes when support lands, no broken fallbacks. Since browser support for `corner-shape` is still not universal, this gives you consistent visual border-radius forever.
45+
4446
The correction formula:
4547

4648
$$r' = r \cdot \frac{1 - 2^{-\frac{1}{2}}}{1 - 2^{-\frac{1}{n}}}$$

0 commit comments

Comments
 (0)