@klinking/squircle

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.

Tailwind

This demo compares regular rounded-* corners with squircle squircle-* corners at several radii.

Small radius

rounded-lg
squircle-lg

Medium radius

rounded-2xl
squircle-2xl

Large radius

rounded-3xl
squircle-3xl

Squircle amount (squircle-amt-*)

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

squircle-3xl squircle-amt-1
squircle-3xl squircle-amt-1.5
squircle-3xl (default 2)
squircle-3xl squircle-amt-3
squircle-3xl squircle-amt-5

Per-corner squircles

squircle-tl-3xl
squircle-tr-3xl
squircle-br-3xl
squircle-bl-3xl
squircle-t-3xl
squircle-b-3xl

Logical-side squircles

squircle-s-3xl
squircle-e-3xl
squircle-se-3xl
squircle-es-3xl
squircle-ee-3xl
squircle-ss-3xl

Edit on StackBlitz

Powered by StackBlitz. Requires a Chromium-based browser.