iOS-Style Smooth Squircle Corners for the Web – CornerKit

CornerKit is a lightweight JavaScript library that applies iOS-style smooth squircle corners to web elements.

It provides a mathematically precise alternative to the standard CSS border-radius property.

Features:

• Minimal bundle size: 3.66KB gzipped with tree-shakeable ES modules.
• Fast rendering: Single element renders in 7.3ms (27% faster than the 10ms target).
• Zero dependencies: Completely standalone with no external requirements.
• Framework-agnostic: Works with React, Vue, Svelte, Angular, or vanilla JavaScript.
• Browser compatibility: 98%+ global coverage with automatic fallback for older browsers.
• Performance tested: 313/313 unit tests and 97.9% code coverage with memory leak prevention.
• Security hardened: A+ security rating with CSP compatibility and no eval usage.

How To Use It:

1. Install the CornerKit package with NPM and import it into your project.

# NPM
$ npm install @cornerkit/core

import CornerKit from '@cornerkit/core';

2. You can also load it from a CDN for quick prototyping:

<script type="module">
  import CornerKit from "https://cdn.jsdelivr.net/npm/@cornerkit/core/dist/cornerkit.esm.js";
</script>

3. Initialize CornerKit and call the apply method with a selector and configuration. The library automatically handles browser capability detection and applies the best available rendering method. On modern browsers, it uses SVG clip-path. On older browsers, it falls back to standard border-radius.

// Create a single instance to manage all squircles
const ck = new CornerKit();

// Apply the effect to any element
ck.apply('.element', {
  // options here
});

4. You can also declare squircles directly in HTML without writing JavaScript. This is useful when you need to apply squircles across multiple elements without managing separate API calls for each one.

<div
  data-squircle
  data-squircle-radius="30"
  data-squircle-smoothing="0.8"
>
  Content Goes Here
</div>

const ck = new CornerKit();
ck.auto();

5. The config object accepts two properties:

ck.apply('.element', {
  radius: 30,
  smoothing: 0.8
});

6. API methods.

FAQs:

Q: Can I animate the radius or smoothing values?
A: Yes, but you’ll need to handle the animation timing yourself. Call ck.update(element, { radius: newValue }) inside your animation loop or transition handler. CornerKit recalculates the path on each update, so use requestAnimationFrame if you’re animating continuously to avoid performance issues.

Q: Does CornerKit work with CSS transforms or 3D transforms?
A: The squircle effect applies at the DOM level via clip-path, so it works with 2D transforms like scale and rotate. 3D transforms can cause rendering artifacts because clip-path doesn’t preserve 3D space in most browsers. If you need 3D transforms, apply the squircle to a parent container and transform a child element instead.

Q: Why aren’t my box-shadows visible on squircled elements?
A: SVG clip-path cuts off content outside the path, which includes box-shadow. Use a drop-shadow filter instead: filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)). The drop-shadow applies to the clipped shape rather than the original rectangle, so shadows follow the squircle curve.

Q: How do I handle elements that change size dynamically?
A: CornerKit automatically listens for resize events and recalculates paths when the window resizes. For programmatic size changes (like expanding an accordion), call ck.update(element, config) after the size change completes. You can use a ResizeObserver if you need automatic updates for element-specific size changes rather than window resizes.

The post iOS-Style Smooth Squircle Corners for the Web – CornerKit appeared first on CSS Script.