smooth-squircle
iOS style squircle corners for React, with a smart fallback for browsers that cannot draw them. About 1.5KB gzipped.
View Live SiteClient
Open source
Role
Author
Service
React · TypeScript · SVG · npm
Work Details
The brief
CSS border-radius draws circular corners. Apple's app icons and cards use smoother squircle curves, and designers kept asking for that look on product cards and buttons. The existing libraries broke on mobile WebViews and older Safari, which is exactly where a lot of shoppers are.
The build
smooth-squircle uses Apple's bezier control points to draw a real squircle path, and falls back to a normal border-radius when the browser cannot render it. It supports different radii for mobile and desktop, and borders that follow the curve exactly. Fully typed in TypeScript and tree-shakeable.
The result
The core is about 1.5KB gzipped and published on npm under the MIT license. My older portfolio used it for every card.
