Borders, squircles & frames hub
A corner can feel boxy or calm depending on the curve. Tune squircle smoothing, strokes and masks, and copy code that keeps the shape true.
Interactive squircle & border studio
Configure squircle curvature, individual corner radii, stroke styles, and export production CSS or Tailwind v4 tokens.
Squircle & Border Parameters
Adjust Figma corner smoothing curves, individual corner radii, stroke styles, and lighting effects.
0% (Standard rounded rectangle) → 100% (Figma & iOS HIG continuous curvature)
Live Canvas Preview
Interactive real-time squircle rendering with pixel-exact stroke alignment.
Brand Peel Squircle
Figma-grade smooth corner superellipse frame.
Code Exporter
Copy production-ready CSS, Tailwind v4, SVG path, or Vue component.
/* Squircle Container */
.squircle-card {
width: 340px;
height: 220px;
position: relative;
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
}
/* SVG Surface Layer (Background + Stroke) */
.squircle-surface {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Content Container */
.squircle-content {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
padding: 1.5rem;
}Curated Squircle & Border Directory
Explore 30+ production-ready squircle continuous curvature paths, glowing borders, and card frames. Click any preset to load into the studio.
iOS Standard App Icon Squircle
iOS & macOS Squircles • 100% Curvature
Apple HIG signature 100% continuous curvature smooth squircle corner path for iOS app icons and widget tiles.
macOS Sonoma Control Center Panel
iOS & macOS Squircles • 85% Curvature
Refined 85% smoothed squircle rounded container mimicking macOS Control Center widgets and notifications.
visionOS Spatial Glass Tile
iOS & macOS Squircles • 92% Curvature
Spatial computing squircle card with ultra-smooth 92% corner curvature and specular rim border highlight.
watchOS Smart Stack Complication
iOS & macOS Squircles • 100% Curvature
Compact 100% smoothed squircle for wearable watch faces and micro-widget complications.
Cyberpunk Cyan Neon Glow
Gradient & Glowing Borders • 70% Curvature
Vibrant neon cyan aura stroke with glowing ambient filter blur for futuristic interfaces.
Spectrum Conic Gradient Shimmer
Gradient & Glowing Borders • 80% Curvature
Multi-stop rainbow conic stroke gradient surrounding a dark SaaS product card.
Luminous Indigo Aura Rim
Gradient & Glowing Borders • 75% Curvature
Sophisticated deep indigo-to-violet gradient stroke for high-end SaaS software cards.
Metallic Gold Luxury Foil
Gradient & Glowing Borders • 60% Curvature
Warm champagne-gold gradient border stroke for VIP tiers and luxury badges.
SaaS Pricing Featured Plan Card
Card Frames & Badges • 80% Curvature
High-contrast active card frame with asymmetric top-accent squircle geometry.
Developer Terminal Code Block
Card Frames & Badges • 50% Curvature
Dark terminal frame with subtle top-left accent corner and minimal 1px border stroke.
Asymmetric Modern Brand Card
Card Frames & Badges • 80% Curvature
Distinctive custom corner radii (large top-left & bottom-right, sharp top-right & bottom-left).
Retro Studio Dashed Dropzone
Dashed & Technical Borders • 75% Curvature
Creative dashed squircle stroke for file dropzones, upload areas, and canvas placeholder frames.
Architect Blueprint Technical Frame
Dashed & Technical Borders • 40% Curvature
Fine technical dashed border with architectural grid aesthetics.
Voucher Ticket Stamp Border
Dashed & Technical Borders • 70% Curvature
Unique ticket-coupon style dashed border outline for discount vouchers and event passes.