CSS Fancy Border Radius Generator
8-point control for organic shapes and fancy border-radius.
Preview
300 x 300
Custom Size
Width300px
Height300px
Horizontal Radius
Top Left30%
Top Right70%
Bottom Right70%
Bottom Left30%
Vertical Radius
Top Left30%
Top Right30%
Bottom Right70%
Bottom Left70%
CSS Code
CSS
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;Tailwind
Tailwind:
rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%]Tip: The markers on the preview box edges show the horizontal and vertical split points.
About This Tool
Traditional CSS border-radius usually sets 4 corners, but it actually supports 8 values (horizontal and vertical radii separately), allowing for various interesting organic shapes. This tool lets you control the horizontal and vertical radii for each corner independently, with real-time preview and code generation. Perfect for creating blobs, creative avatar frames, or unique background containers. Supports one-click copy for standard CSS and Tailwind CSS.
Features
- 🎨 8-Point Control: Independently adjust horizontal/vertical radii
- 💧 Blob Creation: Easily create trendy fluid/organic shapes
- 👁️ Real-time Preview: WYSIWYG shape adjustment
- 📦 Tailwind Support: Generate Tailwind arbitrary value classes
- 📋 Quick Copy: One-click copy for CSS and Tailwind code