CSS Border Radius Generator
Create fancy border-radius shapes with the 8-value syntax. Generate organic blobs, leaves, and asymmetric corners visually.
Corner Values (%)
CSS
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
Frequently Asked Questions
What is CSS border-radius?+
border-radius is a CSS property that rounds the corners of an element. It can take 1-8 values to control each corner independently. The shorthand with '/' creates asymmetric (elliptical) corner radii for organic shapes.
How does the 8-value syntax work?+
The 8-value syntax is: border-radius: TL TR BR BL / TL TR BR BL. Values before the '/' control horizontal radii, values after control vertical radii. This creates elliptical corners rather than circular ones, enabling organic blob-like shapes.
Can I animate border-radius?+
Yes. border-radius is animatable with CSS transitions and animations. Animating between different blob shapes creates smooth morphing effects popular in modern web design.