A lightweight, zero-dependency JavaScript library for smooth, continuous curve corners
npm install @cornerkit/coreAdjust the sliders to see real-time updates and generate code snippets
Preview Element
Render Time: - ms
Dimensions: -
Browser Tier: -
Keyboard Shortcuts: Press R to reset | Press I to inspect (logs to console)
New in v1.2: SVG-based borders with solid, dashed, dotted styles and gradient support! No more anti-aliasing fringe on dark backgrounds. Try the border controls above to see it in action.
See squircles applied to real UI components
radius: 20px, smoothing: 0.8
radius: 24px, smoothing: 0.85
radius: 20px, smoothing: 0.8
radius: 28px, smoothing: 0.9
Squircle border with 2px width
radius: 20px, smoothing: 0.8, borderWidth: 2px
Blue squircle border with solid background
radius: 24px, smoothing: 0.85, borderWidth: 3px, borderColor: #3b82f6
Buttons: radius: 20px, smoothing: 0.8, borderWidth: 2px
New in v1.2: SVG-based borders with style and gradient support
Classic solid line
borderStyle: 'solid'
Dashed line pattern
borderStyle: 'dashed'
Dotted line pattern
borderStyle: 'dotted'
Blue to purple gradient
gradient: [{color: '#3b82f6'}, {color: '#8b5cf6'}]
SVG-based borders eliminate anti-aliasing fringe on dark backgrounds
No white fringe artifacts
SVG borders = crisp on dark
Smooth gradient rendering
No anti-aliasing issues
Confirm your action
radius: 20px, smoothing: 0.8
Important notification
radius: 16px, smoothing: 0.75
Action completed
radius: 20px, smoothing: 0.85
radius: 12px, smoothing: 0.8
radius: 20px, smoothing: 0.9
radius: 8px, smoothing: 0.7
radius: 16px, smoothing: 0.8
radius: 16px, smoothing: 0.8
radius: 24px, smoothing: 0.85
radius: 12px, smoothing: 0.8, borderWidth: 2px
radius: 12px, smoothing: 0.8, borderWidth: 2px
radius: 16px, smoothing: 0.8, borderWidth: 2px
Note: Border applied to wrapper div, not textarea directly (see README for details)
Compare the smooth, continuous curves of squircles with standard CSS rounded corners
✓ 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)
• 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.
CornerKit uses progressive enhancement to support 98%+ of browsers
Your browser: Detecting...
| 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 |
Framework packages support solid borders. For dashed, dotted, or gradient borders, use @cornerkit/core directly.
npm / yarn / pnpm:
npm install @cornerkit/coreCDN (unpkg):
<script src="https://unpkg.com/@cornerkit/core@1.2.0"></script>CDN (jsDelivr):
<script src="https://cdn.jsdelivr.net/npm/@cornerkit/core@1.2.0"></script>import CornerKit from '@cornerkit/core';
// Create instance
const ck = new CornerKit();
// Apply to element
ck.apply('#my-element', {
radius: 20,
smoothing: 0.8
});<div
data-squircle
data-squircle-radius="20"
data-squircle-smoothing="0.8"
>
Your content
</div>
<script>
CornerKit.auto();
</script>import CornerKit, { type SquircleConfig } from '@cornerkit/core';
const ck = new CornerKit();
const config: SquircleConfig = {
radius: 20,
smoothing: 0.8
};
ck.apply('#my-element', config);import { Squircle } from '@cornerkit/react';
function MyComponent() {
return (
<Squircle radius={20} smoothing={0.8}>
<div>Your content</div>
</Squircle>
);
}<template>
<Squircle :radius="20" :smoothing="0.8">
<div>Your content</div>
</Squircle>
</template>
<script setup>
import { Squircle } from '@cornerkit/vue';
</script><script>
import { Squircle } from '@cornerkit/svelte';
</script>
<Squircle radius={20} smoothing={0.8}>
<div>Your content</div>
</Squircle>