Bring iOS-style squircle corners to your web applications

Live Demo - Interactive playground with 36+ UI examples

CornerKit is a lightweight JavaScript library that brings the smooth, continuous curve corners (squircles) from iOS design to the web. At just 5.50 KB gzipped with zero runtime dependencies, it delivers pixel-perfect rounded corners that look better than standard CSS border-radius.

Try the Interactive Demo →

Experiment with squircles in real-time, see side-by-side comparisons, and generate ready-to-use code snippets.

Standard border-radius creates circular arcs that can look harsh and disconnect from the straight edges.

Squircles (superellipses) create smooth, continuous curves that transition naturally from straight edges to corners—the same mathematical curves used in iOS design, Figma, and modern UI systems.

npm install @cornerkit/core

import CornerKit from '@cornerkit/core';

const ck = new CornerKit();

// Apply to any element
ck.apply('.card', {
  radius: 24,        // Corner size in pixels
  smoothing: 0.6,    // iOS standard smoothness (0-1)
  border: {          // Optional: SVG-based border (v1.2.0+)
    width: 2,
    color: '#000'
  }
});

<div
  data-squircle
  data-squircle-radius="24"
  data-squircle-smoothing="0.6"
>
  Beautiful squircle corners, automatically applied!
</div>

<script type="module">
  import CornerKit from '@cornerkit/core';
  const ck = new CornerKit();
  ck.auto(); // Discovers and applies squircles
</script>

• 5.50 KB gzipped (ESM) - includes SVG border rendering
• Zero runtime dependencies
• Tree-shakeable ES modules
• Smaller than most icon libraries

• 7.3ms render time (27% faster than 10ms target)
• 42ms initialization (58% faster than 100ms target)
• 60fps maintained during resizes
• 100 elements in 403ms

• 98%+ browser support via progressive enhancement
• Chrome 23+, Firefox 54+, Safari 13+, Edge 18+
• IE11 fallback with graceful degradation
• Automatic capability detection

• 412/412 unit tests passing (100%)
• 66/67 integration tests passing (98.5%)
• 84.9% code coverage
• Memory leak prevention with WeakMap registry
• A+ security rating (zero vulnerabilities)

Works seamlessly with:

• Vanilla JavaScript
• React
• Vue 3
• Svelte
• Angular
• Any framework or no framework

Official React integration with dedicated components and hooks.

npm install @cornerkit/react

import { Squircle, useSquircle } from '@cornerkit/react';

// Component approach (recommended)
function App() {
  return (
    <Squircle radius={24} smoothing={0.6} className="card">
      Beautiful squircle corners!
    </Squircle>
  );
}

// Polymorphic - render as any element
<Squircle as="button" radius={16} onClick={handleClick}>
  Click me
</Squircle>

// Hook approach for custom components
function CustomCard() {
  const ref = useSquircle({ radius: 24, smoothing: 0.6 });
  return <div ref={ref}>Content</div>;
}

// With borders
<Squircle
  radius={24}
  border={{ width: 2, color: '#e5e7eb' }}
>
  Card with border
</Squircle>

Full @cornerkit/react documentation →

Official Vue 3 integration with component, composable, and directive.

npm install @cornerkit/vue

<script setup>
import { Squircle, useSquircle, vSquircle } from '@cornerkit/vue';
</script>

<template>
  <!-- Component approach (recommended) -->
  <Squircle :radius="24" :smoothing="0.6" class="card">
    Beautiful squircle corners!
  </Squircle>

  <!-- Render as any element -->
  <Squircle tag="button" :radius="16" @click="handleClick">
    Click me
  </Squircle>

  <!-- Directive approach -->
  <div v-squircle="{ radius: 20, smoothing: 0.8 }">
    Directive-based squircle
  </div>
</template>

Full @cornerkit/vue documentation →

Official Svelte integration with component and action.

npm install @cornerkit/svelte

<script>
  import { Squircle, squircle } from '@cornerkit/svelte';
</script>

<!-- Component approach (recommended) -->
<Squircle radius={24} smoothing={0.6} class="card">
  Beautiful squircle corners!
</Squircle>

<!-- Action approach -->
<div use:squircle={{ radius: 20, smoothing: 0.8 }}>
  Action-based squircle
</div>

<!-- Shorthand action (radius only) -->
<button use:squircle={16}>Click me</button>

Full @cornerkit/svelte documentation →

For frameworks without dedicated packages or custom integrations, use @cornerkit/core directly.

Full @cornerkit/core documentation →

const ck = new CornerKit();

// Apply to single element
ck.apply('#button', { radius: 20, smoothing: 0.6 });

// Apply to multiple elements
ck.applyAll('.card', { radius: 24, smoothing: 0.6 });

// Auto-discover via data attributes
ck.auto();

// Update existing squircle
ck.update('#button', { radius: 32 });

// Remove squircle
ck.remove('#button');

// Get current state
const info = ck.inspect('#button');
console.log(info.config); // { radius: 32, smoothing: 0.6 }

CornerKit v1.2.0 introduces SVG-based border rendering that eliminates anti-aliasing fringe on dark backgrounds and supports solid, dashed, dotted, and gradient styles.

const ck = new CornerKit();

// Solid border
ck.apply('.card', {
  radius: 24,
  smoothing: 0.6,
  border: { width: 2, color: '#e5e7eb' }
});

// Dashed border
ck.apply('.upload-zone', {
  radius: 20,
  border: { width: 2, color: '#6b7280', style: 'dashed' }
});

// Dotted border
ck.apply('.badge', {
  radius: 12,
  border: { width: 3, color: '#10b981', style: 'dotted' }
});

// Gradient border
ck.apply('.featured', {
  radius: 24,
  border: {
    width: 3,
    gradient: [
      { offset: '0%', color: '#3b82f6' },
      { offset: '100%', color: '#8b5cf6' }
    ]
  }
});

<div
  data-squircle
  data-squircle-radius="24"
  data-squircle-border-width="2"
  data-squircle-border-color="#e5e7eb"
  data-squircle-border-style="dashed"
>
  Card with dashed squircle border
</div>

Legacy borderWidth and borderColor props still work:

// Old API (v1.1) - still works
ck.apply('.card', { borderWidth: 2, borderColor: '#e5e7eb' });

// New API (v1.2) - recommended
ck.apply('.card', { border: { width: 2, color: '#e5e7eb' } });

Works with CSS frameworks that use !important (like Tailwind CSS):

<!-- Works correctly with Tailwind's important mode -->
<div class="bg-blue-50 p-4" data-squircle data-squircle-border-width="2">
  Content
</div>

All metrics verified by automated tests on 2020 MacBook Pro (M1):

• A+ Security Rating - Zero production vulnerabilities
• OWASP Top 10 compliant
• No network requests (100% offline)
• No data collection (GDPR/CCPA compliant)
• CSP compatible (no unsafe-eval or unsafe-inline)
• No eval(), Function(), or innerHTML

Coverage: 98%+ of global browser usage with automatic capability detection.

Full TypeScript definitions included:

import CornerKit, {
  SquircleConfig,
  ManagedElementInfo,
  BrowserSupport
} from '@cornerkit/core';

const ck = new CornerKit({
  radius: 24,
  smoothing: 0.6
});

const config: SquircleConfig = {
  radius: 32,
  smoothing: 0.8
};

ck.apply('.card', config);

• Complete API Reference - Full documentation with examples
• Installation Guide - npm, yarn, pnpm, CDN
• Quick Start - Get started in under 2 minutes
• Framework Integration - React, Vue, Svelte, Angular
• Configuration Guide - radius and smoothing parameters
• Performance Details - Comprehensive benchmarks
• Browser Compatibility - Full compatibility matrix
• Security Audit - A+ security rating details
• Contributing Guide - How to contribute

Working examples with interactive demos:

• Vanilla JavaScript - Pure HTML/CSS/JS implementation
• React - Squircle component and useSquircle hook demos
• Vue 3 - Squircle component, useSquircle composable, and v-squircle directive demos
• Svelte - Squircle component and squircle action demos

<!-- ES Module -->
<script type="module">
  import CornerKit from 'https://cdn.jsdelivr.net/npm/@cornerkit/core@1.2.0/dist/cornerkit.esm.js';
  const ck = new CornerKit();
  ck.apply('.card', { radius: 24, smoothing: 0.6 });
</script>

<!-- UMD (Global) -->
<script src="https://cdn.jsdelivr.net/npm/@cornerkit/core@1.2.0/dist/cornerkit.js"></script>
<script>
  const ck = new CornerKit();
  ck.apply('.card', { radius: 24, smoothing: 0.6 });
</script>

• WCAG 2.1 AA compliant
• Preserves focus indicators (outline never modified)
• Respects prefers-reduced-motion
• Screen reader compatible
• No impact on semantics or tab order
• ARIA attributes preserved

We welcome contributions! Please see our Contributing Guide for details.

# Clone and install
git clone https://github.com/bejarcode/cornerkit.git
cd cornerkit/packages/core
npm install

# Run tests
npm test                       # Unit tests
npm run test:integration       # Integration tests
npm run test:performance       # Performance benchmarks

# Build
npm run build                  # Production build
npm run analyze-bundle         # Bundle size analysis

• Phase 1: Core library + Demo website ✅ Complete
• Phase 2: Framework wrappers ✅ Complete
  • React (@cornerkit/react) ✅ Complete
  • Vue (@cornerkit/vue) ✅ Complete
  • Svelte (@cornerkit/svelte) ✅ Complete
• Phase 3: Shopify Theme App Extension
• Phase 4: Future (Native CSS, Houdini, advanced features)

MIT - Victor Bejar / bejarllc

See LICENSE for details.

• Figma for squircle algorithm research
• Apple for pioneering squircle design in iOS
• The Houdini CSS Working Group for the Paint API