Design Tools
8-Value Elliptical
CSS Border Radius & Blob Studio
Create standard symmetrical rounded corners, asymmetrical interface cards, or fluid 8-point organic blob shapes for modern web layouts.
Corner Controls
Top-Left (X)
16px
Top-Right (X)
16px
Bottom-Right (X)
16px
Bottom-Left (X)
16px
Live Viewport
CSS Declaration
border-radius: 16px 16px 16px 16px;How the CSS 8-Value Syntax Works
When using standard border-radius, four values dictate circular arc radii. By introducing a forward slash / (e.g. border-radius: 60px 40px 30px 20px / 30px 50px 70px 40px), CSS creates independent horizontal and vertical radii for each corner, transforming rigid squares into fluid, organic biological blob silhouettes.
Frequently Asked Questions
Yes. Browsers can smoothly interpolate between two 8-value border-radius declarations in CSS keyframe animations, producing fluid morphing liquid animations with zero JavaScript overhead.