CSS Border Radius Generator
Create basic rounded corners or organic, complex "blob" shapes visually. Adjust the radii and copy the CSS instantly for your web projects.
How to Use
- By default, you are in Simple Mode. Use the four sliders to adjust the corner radii in pixels.
- Toggle Blob Mode to unlock the 8-value percentage system for complex, organic shapes.
- Adjust the X and Y percentage sliders in Blob mode to stretch and morph the corners independently.
- Click Random Blob to automatically generate smooth, organic backgrounds.
- Click Copy to copy the generated CSS exactly as shown.
Features
Simple Corners
Standard pixel-based border-radius for UI cards and buttons.
Fancy Blobs
Full 8-value syntax support for organic, fluid design assets.
Live Rendering
See the shape smoothly animate as you adjust the sliders.
One-Click Copy
Generates the cross-browser compatible CSS code instantly.
Use Cases
- Modern Web Design: Use blob shapes as background decorative elements behind text or hero sections.
- Image Cropping: Apply organic border-radius to
<img>tags to break away from standard boxy images. - UI Components: Fine-tune button or card corners to match your brand's style guide.
- CSS Learning: Understand how the complex slash (
/) syntax works in border-radius logic.
Understanding Complex Border Radius
Most developers know standard border radius (e.g., border-radius: 10px). However, CSS3 allows you to specify elliptical corners by providing two values for a single corner, separated by a slash (/). The syntax is: border-radius: [Top-Left-X] [Top-Right-X] [Bottom-Right-X] [Bottom-Left-X] / [Top-Left-Y] [Top-Right-Y] [Bottom-Right-Y] [Bottom-Left-Y].
When you use percentages instead of pixels, the curves scale fluidly with the height and width of the container, allowing you to create smooth, organic "blobs" that adapt perfectly to responsive web design.
Design Workflow
Once you generate your perfect shape, you might want to give it some depth. Combine this tool with the Box Shadow Generator. To fill your blob with vibrant colors, use the CSS Gradient Generator. Finally, try embedding your new CSS in a live environment using our Online Code Editor.
Frequently Asked Questions
What is Blob Mode?
Blob mode enables the advanced 8-value border-radius CSS syntax using percentages. This allows horizontal and vertical curves for each corner to be calculated independently, resulting in organic, fluid shapes instead of perfect circles or rounded rectangles.
Is the complex syntax supported by all browsers?
Yes, the 8-value slash syntax has been fully supported by Chrome, Firefox, Safari, and Edge for many years. It is safe for modern production environments.
Why use percentages instead of pixels?
Percentages allow the shape to stretch naturally. If a user resizes their browser window and the box changes size, a percentage-based border-radius ensures the organic shape doesn't break or look squished.
Can I apply this to images?
Absolutely! You can copy the generated CSS and apply it directly to an <img> element to create a beautifully cropped organic photograph.
Is it free?
Yes, 100% free with no limits.