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

@cornerkit/core · v1.3.0

Squircle corners,
the way iOS draws them.

Name: CornerKit
Author: CornerKit

cornerKit clips any element with a true continuous curve, the superellipse Apple uses, instead of a circular arc. The dashed line on the shape is plain border-radius. The difference is the product.

Try the playground View on GitHub

npm install @cornerkit/core

0 dependencies · 5.9 KB gzip · 98% browsers · WCAG 2.1 AA

Playground

Tune it live

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)

New in v1.3: Hover effects via CSS variables. Set --ck-border-color on :hover and the border restyles with zero JavaScript. Enable a border above, then see the Hover Effects card in the gallery below.

In practice

Real components, clipped live

See squircles applied to real UI components

Buttons

radius: 20px, smoothing: 0.8

Cards

Three surfaces, one geometry. Content clips with the shape: the photo's corners follow the card's curve.

Alpine print Ships this week

$29

radius: 24 · smoothing: 0.85

Dark surface

Same geometry on dark UI. Clean edges, no halo.

radius: 20 · smoothing: 0.8

“The corners are the detail nobody names, but everyone notices.”

radius: 28 · 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 solid background

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

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

Border Styles

SVG-based borders with solid, dashed, dotted, and gradient styles (v1.2+)

Solid Border

Classic solid line

borderStyle: 'solid'

Dashed Border

Dashed line pattern

borderStyle: 'dashed'

Dotted Border

Dotted line pattern

borderStyle: 'dotted'

Gradient Border

Blue to purple gradient

gradient: [{color: '#3b82f6'}, {color: '#8b5cf6'}]

Hover Effects

New in v1.3

Borders and backgrounds restyle from plain CSS custom properties. No JavaScript on hover, just two variables.

.card:hover {
  --ck-border-color: #FF2D55;  /* border stroke */
  --ck-background: #0F172A;    /* squircle background */
}

Dark Background Demo

SVG-based borders eliminate anti-aliasing fringe on dark backgrounds

Clean Edges

No white fringe artifacts

SVG borders = crisp on dark

Gradient on Dark

Smooth gradient rendering

No anti-aliasing issues

Modals

One dialog, four squircles: the panel, both buttons, and the toast are clipped independently. Corners stay continuous at every scale, and they nest.

panel: radius 24 · buttons: radius 12 · toast: radius 14

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)

Geometry

One shape, both corners

The solid shape is cornerKit. The dashed outline is the same box with plain border-radius. Watch the corners: the arc overshoots where the continuous curve eases in.

radius 32 · smoothing 0.8

Continuous curve

Curvature builds gradually from the straight edge, the superellipse profile iOS uses. Smoothing is adjustable from 0.0 to 1.0.

Circular arc

Standard border-radius switches from straight to circle in a single point. At large sizes the transition reads as a kink.

Support

Works where your users are

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

Install

Drop it in

Framework packages support solid borders. For dashed, dotted, or gradient borders, use @cornerkit/core directly.

Installation

npm / yarn / pnpm:

npm install @cornerkit/core

CDN (unpkg):

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

CDN (jsDelivr):

<script src="https://cdn.jsdelivr.net/npm/@cornerkit/core@1.3.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 @cornerkit/react

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

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

Vue @cornerkit/vue

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

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

Svelte @cornerkit/svelte

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

<Squircle radius={20} smoothing={0.8}>
  <div>Your content</div>
</Squircle>

Questions

Squircles, answered

What is a squircle?

A squircle is a shape between a square and a circle, drawn with a superellipse curve. Unlike a rounded rectangle, its curvature builds gradually from the straight edge instead of switching abruptly to a circular arc. Apple uses squircles across iOS for icons, buttons, and cards, which is why they read as smoother and more polished.

Why not just use CSS border-radius?

CSS border-radius draws a circular arc that meets the straight edge at a single point, creating a visible transition, especially at larger sizes. A squircle has continuous curvature, so the edge flows into the corner with no kink. cornerKit clips elements with a real superellipse path, the same profile iOS uses.

How do I match Figma's corner smoothing in CSS?

cornerKit's smoothing parameter maps to Figma's corner smoothing setting: smoothing 0.6 corresponds to roughly 60% corner smoothing in Figma, the iOS preset. Apply it with ck.apply(element, { radius: 20, smoothing: 0.6 }) and the rendered corner matches the design instead of falling back to plain border-radius.

Does CSS support squircles natively?

Partially. The CSS corner-shape: squircle property ships in Chrome 139 and newer Chromium browsers, but Firefox and Safari do not support it yet. cornerKit gives you squircle corners in about 98% of browsers today via SVG clip-path, with a graceful border-radius fallback everywhere else.

Does cornerKit work with React, Vue, or Svelte?

Yes. Official packages exist for all three: @cornerkit/react (component and hook), @cornerkit/vue (component, composable, and directive), and @cornerkit/svelte (component and action). All wrap the same zero-dependency @cornerkit/core library.

Will squircle corners slow my page down?

No. The core library is 5.9 KB gzipped with zero dependencies, renders in under 10 ms per element, and updates on resize through a debounced ResizeObserver. Off-screen elements can be deferred with lazy loading via IntersectionObserver.