The Complete Guide to CSS Border Radius & Organic Shapes
Understand 8-point corner geometry, the full slash (/) shorthand syntax, iOS squircles, and how to create natural organic blobs in pure CSS.
1. The CSS 8-Point Radius Syntax
Most developers know border-radius: 12px;, but CSS supports up to eight distinct radius values using the slash separator:
/* border-radius: [top-left-x] [top-right-x] [bottom-right-x] [bottom-left-x] / [top-left-y] [top-right-y] [bottom-right-y] [bottom-left-y]; */ border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
The values before the slash define the horizontal radii; the values after the slash define the vertical radii. This allows for smooth asymmetrical curves that replicate organic objects.
2. Squircles vs Standard Rounded Corners
Standard CSS rounded corners connect straight edges with circular arcs (circular fillets), creating a noticeable transition point where curvature begins. Apple designs use squircles (superellipses) with continuous curvature for an ultra-smooth, premium aesthetic. By using percentage-based elliptical radii, you can replicate this squircle feel in standard CSS.
3. Fluid Responsive Shapes with `%` Units
When you use percentages instead of pixels, the corner curvature automatically scales with the element dimensions. A 50% radius creates a perfect circle on a square element and an ellipse on a rectangle.