CSS Border Radius Generator - Rounded Corners & Blobs (8-Point) | ToolsAid
Advanced CSS Border Radius Generator. Create rounded corners, circles, and organic 'blob' shapes with full 8-point control. Visual preview with one-click CSS copy.
Settings
💡 Advanced mode uses percentage values to create organic 'blob' shapes.
border-radius: 0px;
key Features
- Full 8-Point Control (Horizontal & Vertical radii)
- Create organic 'Blob' shapes with morphing
- Advanced Mode for fine-grained control
- Random Blob Generator for instant inspiration
- Visual interactive preview with live CSS output
- Supports standard (px) and percentage (%) values
The CSS Border Radius Generator is a powerful visual tool for modern web designers.
While basic rounded corners are a staple of UI design, the real magic happens when you unlock the full potential of the border-radius property.
Dual Modes for Maximum Control:
- Simple Mode: Perfect for standard UI elements like buttons and cards. Adjust all 4 corners independently to create consistent, soft interfaces.
- Advanced (Blob) Mode: Unlocks the "slash syntax" (e.g.,
60% 40% / 30% 70%). Control the horizontal and vertical radius of each corner separately to create organic, fluid, and non-geometric shapes known as "Blobs."
Why use Blobs? Organic shapes appear friendlier and more natural than rigid boxes. They are perfect for:
• Unique background graphics
• Creative image masks (using overflow: hidden)
• playful profile picture frames
Don't know where to start? Hit the "Random Blob" button to instantly generate a unique organic shape, then tweak it to perfection.
Frequently Asked Questions
What is an 8-point border radius?
Standard border-radius uses 4 values (one for each corner). Advanced CSS allows 8 values: horizontal and vertical radii for each of the 4 corners, separated by a slash (e.g., `50% 20% / 10% 40%`). This creates non-circular, organic shapes.
How do I make a 'Blob' shape?
Use our 'Advanced' mode to unlock the slash syntax. By setting different horizontal and vertical values for each corner, you can distort a square into a unique, fluid blob.
Is this supported in all browsers?
Yes! The `border-radius` slash syntax is part of the standard CSS3 specification and works in all modern browsers (Chrome, Firefox, Safari, Edge).
Related Tools
Color Picker
Free Advanced Color Picker & Palette Generator. Instantly get Hex, RGB, HSL, and CMYK values. Upload images to extract dominant colors and create beautiful color palettes for your web designs.
Gradient Generator
Visual CSS Gradient Generator. Create stunning linear and radial gradients with ease. Copy cross-browser compatible CSS code instantly to enhance your website backgrounds.
CSS Box Shadow Generator
Advanced CSS Box Shadow Generator. Design soft, realistic, and layered shadows for modern user interfaces. Preview changes in real-time and copy the CSS code.
CSS Clip-path Maker
Advanced CSS Clip-path Maker. Visually create custom shapes using the CSS clip-path property. Drag points on a canvas to generate complex polygon shapes.
SVG Blob & Wave Generator
Free SVG Blob and Wave Generator. Create organic, unique shapes and section dividers for your websites. Customizable colors, complexity, and gradients. Export as pure SVG.
Responsive Image Generator
Free Responsive Image Generator. Automatically create 'srcset' lines for multiple screen sizes. Improve your SEO, page load speeds, and Core Web Vitals scores.
Flexbox Playground
Interactive Flexbox Playground. Visually build and test CSS Flexbox layouts. Generate code instantly.
Favicon Generator
Professional Favicon Studio. Design your own favicon with custom colors, emojis, and shapes. Visualize on Google, Browser Tabs, and iOS. Instant ZIP download.
Find this tool helpful?
If these tools save you time, consider supporting the development. Your support helps keep the server running and new tools coming!
Buy me a coffee