JavaScript Required: This interactive demo requires JavaScript to be enabled. Please enable JavaScript in your browser settings to view the full experience.

iOS-style squircle corners for the web

Name: CornerKit
Author: CornerKit

A lightweight, zero-dependency JavaScript library for smooth, continuous curve corners

Zero dependencies Pure vanilla JavaScript

3.66 KB gzipped Tiny bundle size

98%+ browser support Works everywhere

Progressive enhancement 4-tier rendering

WCAG 2.1 AA accessible Screen reader friendly

Try Playground View on GitHub

npm install @cornerkit/core

Live Interactive Playground

Adjust the sliders to see real-time updates and generate code snippets

Corner Radius: 20px

Smoothing: 0.80

Enable Border

Preview Element

Performance Metrics

Render Time: - ms

Dimensions: -

Browser Tier: -

Generated Code

Keyboard Shortcuts: Press R to reset | Press I to inspect (logs to console)

Note: CornerKit v1.1 now includes border support! Try the border toggle above to add squircle borders with customizable width and color. The library uses CSS clip-path for performance and broad compatibility.

Visual Examples Gallery

See squircles applied to real UI components

Buttons

radius: 20px, smoothing: 0.8

Cards

Product Card

radius: 24px, smoothing: 0.85

Info Card

radius: 20px, smoothing: 0.8

Testimonial Card

radius: 28px, smoothing: 0.9

Bordered Elements

Bordered Card

Squircle border with 2px width

radius: 20px, smoothing: 0.8, borderWidth: 2px

Colored Border

Blue squircle border with gradient background

radius: 24px, smoothing: 0.85, borderWidth: 3px, borderColor: #3b82f6

Buttons: radius: 20px, smoothing: 0.8, borderWidth: 2px

Modals

Navigation

Tabs

radius: 12px, smoothing: 0.8

Pills

radius: 20px, smoothing: 0.9

Breadcrumbs

Home › Products › Details

radius: 8px, smoothing: 0.7

Images

radius: 16px, smoothing: 0.8

radius: 24px, smoothing: 0.85

Form Elements

Text Input (with squircle border)

radius: 12px, smoothing: 0.8, borderWidth: 2px

Email Input (with squircle border)

radius: 12px, smoothing: 0.8, borderWidth: 2px

Textarea (Manual Wrapper Pattern)

radius: 16px, smoothing: 0.8, borderWidth: 2px

Note: Border applied to wrapper div, not textarea directly (see README for details)

Squircle vs Border-Radius

Compare the smooth, continuous curves of squircles with standard CSS rounded corners

✨ Squircle (CornerKit)

Smooth & Natural

✓ Continuous S-curve - smooth transition from straight edges

✓ iOS-style design - same curves used by Apple

✓ Adjustable smoothing - control curve intensity (0.0-1.0)

⭕ Standard Border-Radius

Circular Arc

• Circular arc - abrupt transition at corner

• Standard CSS - uniform radius only

• Can look harsh - especially at large sizes

Squircles use a superellipse formula to create smoother, more continuous curves than standard border-radius. The smoothing parameter (0.0-1.0) controls how closely the curve follows the iOS-style continuous curve characteristic.

Browser Compatibility

CornerKit uses progressive enhancement to support 98%+ of browsers

Your browser: Detecting...

Browser Support Matrix

Browser	Version	Tier	Performance
Chrome	65+	Houdini / ClipPath	Excellent
Firefox	60+	ClipPath	Excellent
Safari	13.1+	ClipPath	Excellent
Edge	79+	Houdini / ClipPath	Excellent
IE11	11	Fallback	Border-radius only

Tier Hierarchy

Native CSS - GPU-accelerated, zero JavaScript overhead (Chrome 139+)
Houdini Paint API - Runs on paint thread, near-native performance (Chrome 65+, Edge 79+)
SVG ClipPath - Dynamic path generation, excellent performance (All modern browsers)
Border-Radius Fallback - Standard rounded corners, universal compatibility

Code Examples & Installation

Installation

npm / yarn / pnpm:

npm install @cornerkit/core

CDN (unpkg):

<script src="https://unpkg.com/@cornerkit/core@1.1.0"></script>

CDN (jsDelivr):

<script src="https://cdn.jsdelivr.net/npm/@cornerkit/core@1.1.0"></script>

Vanilla JavaScript

import CornerKit from '@cornerkit/core';

// Create instance
const ck = new CornerKit();

// Apply to element
ck.apply('#my-element', {
  radius: 20,
  smoothing: 0.8
});

HTML Data Attributes

<div
  data-squircle
  data-squircle-radius="20"
  data-squircle-smoothing="0.8"
>
  Your content
</div>

<script>
  CornerKit.auto();
</script>

TypeScript

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

const ck = new CornerKit();
const config: SquircleConfig = {
  radius: 20,
  smoothing: 0.8
};
ck.apply('#my-element', config);

React (Coming Soon)

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

function MyComponent() {
  return (
    <Squircle radius={20} smoothing={0.8}>
      <div>Your content</div>
    </Squircle>
  );
}

Vue (Coming Soon)

<template>
  <Squircle :radius="20" :smoothing="0.8">
    <div>Your content</div>
  </Squircle>
</template>

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