Design standard rounded corners, asymmetric cards, and 8-point organic blob shapes with interactive sliders.
Separate horizontal and vertical corner radii for organic morphing shapes
border-radius: 24px 24px 24px 24px;
rounded-[24px_24px_24px_24px]
Understand standard 4-corner curves, iOS-style super-ellipses (squircles), and organic 8-value asymmetric morphing shapes for cutting-edge component styling.
Standard CSS border-radius applies equal horizontal and vertical curvature to each corner (e.g. border-radius: 16px). While clean for cards and buttons, it cannot produce organic, asymmetrical shapes.
By separating horizontal and vertical radii using a forward slash (h1 h2 h3 h4 / v1 v2 v3 v4), CSS defines 8 independent ellipse inflection points. This allows developers to build fluid hero blobs, natural leaf badges, and morphing avatar containers.
Manually calculating 8 percentage coordinates in CSS is nearly impossible without visual feedback.
Todoal’s CSS Border Radius Generator lets you drag horizontal and vertical anchor points interactively, test curated squircle presets, and export copy-paste ready standard CSS and Tailwind arbitrary classes in one click.
Combine border radius curves with Todoal's integrated UI generators and code formatters for complete design system consistency:
Add realistic ambient depth and key-light contact elevation to your rounded cards using our CSS Box Shadow Generator.
Fill your organic blob shapes with multi-stop linear or radial color transitions via the Gradient Generator.
Sample exact HEX and HSL colors from mockups with the Online Color Picker.
Format stylesheets with CSS Formatter, compress bundles with CSS Minifier, and inspect vector graphics with SVG Viewer.
| Shape Type | CSS Border Radius Syntax | Ideal UI Component |
|---|---|---|
| Pill Capsule | border-radius: 9999px; | Navigation badges, status tags, pill CTA buttons. |
| iOS Squircle | border-radius: 28% / 28%; | App icons, feature cards, modern hero tiles. |
| Organic Fluid Blob | border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; | Hero background decorations, testimonial avatars. |
Actionable frameworks, neuroscience-backed habit protocols, and focus strategies.
Todoal
Build your Winter Arc 2026 with a simple 90 day routine for daily priorities habits focus planning and consistent progress without overcomplicating it
Looking for a Todoist alternative? Compare Todoal and other Todoist alternatives for daily tasks priorities simple planning and focused productivity
Learn how to create a daily task to do list online to organize priorities plan your day and stay focused without complicated productivity tools
Actionable frameworks, neuroscience-backed habit protocols, and focus strategies.
Todoal
Build your Winter Arc 2026 with a simple 90 day routine for daily priorities habits focus planning and consistent progress without overcomplicating it
Looking for a Todoist alternative? Compare Todoal and other Todoist alternatives for daily tasks priorities simple planning and focused productivity
Learn how to create a daily task to do list online to organize priorities plan your day and stay focused without complicated productivity tools
Everything you need to know about this browser tool and privacy.
Stop juggling scattered notes and infinite task lists. Todoal helps you lock in your 4 top daily priorities, keep daily habits on track with permanent reminders, and start every morning with focus.
Explore other free, 100% client-side developer and image utilities.
Design visual linear, radial, and conic gradients with 30+ curated presets and CSS/PNG export.
Generate clean CSS gradient syntax, vendor prefixes, and Tailwind classes with live preview.
Create multi-layer realistic box shadows, inset effects, and elevation styles with clean CSS output.
Resize image dimensions with aspect ratio lock, percentage presets, and output quality controls.
Compress PNG, JPG, and WebP images client-side with interactive before/after visual comparison.
Crop, rotate, and flip images with custom aspect ratios (1:1, 16:9, 4:3, 9:16) locally.