We all love the squircle! It's great, we can use it to make corners feel extra smooth. Gives that little bit of zhuzh. Others can tell you all about the math and why we love it. And now we can use them in CSS! There's just one problem... for the same border-radius, the squircle will look less rounded than the circle. That's where this package comes in.
Explore squircle utilities, compare pill shapes and shadows, and measure rendering performance. The framework sandboxes include live-editable code.
Compare plain Tailwind shadows with squircle pills side by side. Try CSS variables, multiple shadows, hover states and the polyfill.
Explore pill sides, backgrounds, borders, outlines, rings and shadows. Compare the worklet, polyfill and native fallback.
Keep a growing composer's corners round: pills that stop getting rounder past a radius, in Tailwind, the polyfill and the fallback.
Compare the shipped pill shape with a CAD-style fillet, with interactive controls, curvature combs and plots.
Compare regular rounded corners with squircle corners at different radii using Tailwind CSS utilities.
Squircle utilities authored as StyleX dynamic styles —
stylex.props(squircle.all('1rem')).
Squircle utilities via the Panda preset, prefixed to coexist with Tailwind on the same page.
Measure rendering performance while resizing pills, comparing the worklet, polyfill and native fallback at different pill counts.