8-Point Slash Syntax · Organic Blobs · Pure CSS
CSS Border Radius Generator
Design natural organic blobs, asymmetric cards, and liquid shapes using full 8-point horizontal and vertical CSS border-radius syntax.
Presets:
Horizontal Corner Radii (%)
Top-Left Horizontal30%
Top-Right Horizontal70%
Bottom-Left Horizontal30%
Bottom-Right Horizontal70%
Vertical Corner Radii (%)
Top-Left Vertical30%
Top-Right Vertical30%
Bottom-Left Vertical70%
Bottom-Right Vertical70%
Interactive Shape Preview
8-Point Radius
Color Theme:
CSS Output
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;Understanding 8-Point Border Radius Syntax
The Slash (/) Separator Explained
Standard CSS border-radius: 12px; applies circular curvature where the horizontal and vertical radii are equal.
By introducing a forward slash (/), CSS allows you to define elliptical corners with independent horizontal and vertical radii:border-radius: [H-tl] [H-tr] [H-br] [H-bl] / [V-tl] [V-tr] [V-br] [V-bl];
Designing Fluid Micro-Interactions & Blobs
Organic blobs created with percentage units (%) scale fluidly across viewports and hero sections without pixelation.
Combining 8-point border radii with CSS keyframe transitions lets you morph shapes smoothly between different preset values to create living, animated liquid blobs.