🫧 Organic Shapes & 8-Point Radii
CSS 8-Point Border-Radius & Blob Generator
Construct fluid organic shapes and asymmetrical blobs with independent horizontal and vertical corner controls.
Horizontal Radii (%):
Vertical Radii (%):
Blob Visual Stage:
Blob Shape
CSS Output:
Understanding 8-Value Border-Radius
The CSS border-radius shorthand can define up to eight values when using the slash (/) separator syntax.
- Syntax:
border-radius: <h-top-left> <h-top-right> <h-bottom-right> <h-bottom-left> / <v-top-left> <v-top-right> <v-bottom-right> <v-bottom-left>; - Organic Aesthetics: By staggering opposing horizontal and vertical curvature percentages, UI elements take on natural liquid or clay-like geometries without external image assets.