Fancy Border Radius Generator
Generate organic, blob-like shapes using advanced CSS border-radius.
Configuration
Adjust the horizontal and vertical radii for each corner to create organic shapes.
Horizontal Radii
Top Left: 30%
Top Right: 70%
Bottom Right: 70%
Bottom Left: 30%
Vertical Radii
Top Left: 30%
Top Right: 30%
Bottom Right: 70%
Bottom Left: 70%
Width: 300px
Height: 300px
CSS Code
width: 300px; height: 300px; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; background: linear-gradient(45deg, #3b82f6, #8b5cf6);
Fancy Border Radius Generator
The Fancy Border Radius Generator allows you to create organic, non-standard shapes using CSS. While most people use a single value for border-radius, CSS actually supports up to 8 values to define complex curves.
Understanding the Syntax
The syntax border-radius: horizontal-values / vertical-values; allows you to control the curvature of each corner independently on the X and Y axes.
- Horizontal Values: Top-Left, Top-Right, Bottom-Right, Bottom-Left (X-axis).
- Vertical Values: Top-Left, Top-Right, Bottom-Right, Bottom-Left (Y-axis).
By mixing these values, you can create "blobs" and other organic shapes that are perfect for modern web design backgrounds and image masks.