@klinking/squircle

GitHub Demos

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.

Panda CSS

Squircle utilities consumed via the Panda preset's squircle* shorthands. Panda is configured with prefix: 'pd' so its generated classes cannot collide with Tailwind utilities used elsewhere on this site.

Small radius

css({ borderRadius: 'lg' })
css({ squircle: 'lg' })

Medium radius

css({ borderRadius: '2xl' })
css({ squircle: '2xl' })

Large radius

css({ borderRadius: '3xl' })
css({ squircle: '3xl' })

Squircle amount via squircleAmt

Controls the superellipse exponent. Higher = more square. Default is 2.

squircle: '3xl', squircleAmt: '1'
squircle: '3xl', squircleAmt: '1.5'
squircle: '3xl' (default 2)
squircle: '3xl', squircleAmt: '3'
squircle: '3xl', squircleAmt: '5'

Per-corner squircles

squircleTopLeft: '3xl'
squircleTopRight: '3xl'
squircleBottomRight: '3xl'
squircleBottomLeft: '3xl'
squircleTop: '3xl'
squircleBottom: '3xl'

Logical-side squircles

squircleStart: '3xl'
squircleEnd: '3xl'
squircleStartStart: '3xl'
squircleStartEnd: '3xl'
squircleEndStart: '3xl'
squircleEndEnd: '3xl'

Edit on StackBlitz

Powered by StackBlitz. Requires a Chromium-based browser.