CSS Border Radius/Blob Generator
Border Radius Mode
Interactive Preview
One-liner
Full blob CSS
Blob/Shape Presets
Similar Tools
CSS Neumorphism Generator
arrow_forwardCreate neumorphism depth effects with CSS
CSS Border Radius/Blob Generator
arrow_forwardGenerate custom border radius and organic blob shapes
Button Generator
arrow_forwardGenerate captivating buttons for any purpose
CSS Tools arrow_forward
CSS tools for creating rich and polished user interfaces
CSS Border Radius Generator & Organic Blob Maker
The CSS Border Radius Generator is a free, interactive web design tool that makes creating standard rounded corners, asymmetric curves, pill shapes, and organic 8-value morphing CSS blobs fast and effortless. Instead of calculating complex radius percentages by hand, you can tweak visual sliders, experiment with single or multi-corner configurations, generate randomized fluid blobs, and immediately copy clean, production-ready CSS code.
Read more
How to Use the Border Radius Generator
- Select a Mode: Choose All Corners to apply a uniform radius to every corner with one slider, 4 Corners for independent corner values (Top-Left, Top-Right, Bottom-Right, Bottom-Left), or 8 Values to customize separate horizontal and vertical radii for advanced organic shapes.
- Choose Your Unit: Toggle between pixels (
px), percentage (%), orremto suit your design requirements. Percentage units are ideal for fluid blobs and circles, while pixel units are perfect for cards and buttons. - Generate Random Blobs: Click the Generate Random Blob button to instantly produce unique, smooth organic shapes.
- Explore Presets: Click on any of the curated shape presets—including circles, squircles, leaves, teardrops, shields, and liquid blobs—to load them instantly.
- Copy the CSS: Grab the generated
border-radiusproperty or complete CSS rules with the one-click copy button and paste it straight into your stylesheet.
Understanding CSS border-radius Syntax
The CSS border-radius property allows you to define how rounded an element's corners are. While most developers are familiar with the single-value shorthand, CSS supports up to 8 individual radii:
1. Single-Value Syntax
border-radius: 16px;
Applies a 16-pixel radius uniformly to all four corners.
2. Four-Corner Syntax
border-radius: 20px 40px 20px 40px;
Defines the values in clockwise order: Top-Left, Top-Right, Bottom-Right, and Bottom-Left.
3. Eight-Value (Slash /) Advanced Syntax
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
The slash (/) separates the horizontal radii (before the slash) from the vertical radii (after the slash). By giving each corner different horizontal and vertical curve distances, you can create organic, egg-shaped, leaf-shaped, and smooth fluid blob designs without needing SVG or canvas.
FAQ
What is the CSS slash (/) syntax in border-radius?
The slash in border-radius: [horizontal] / [vertical] separates the horizontal curve radii from the vertical curve radii of the corners. This enables elliptical corners and 8-point organic blob shapes.
How do I make a perfect circle or pill with CSS border-radius?
For a perfect circle, apply border-radius: 50% on an element with equal width and height (1:1 aspect ratio). For a pill or capsule shape, set border-radius: 9999px on a rectangular element.
Are CSS organic blobs supported across all modern browsers?
Yes. The 8-value border-radius syntax is part of the official CSS Backgrounds and Borders Module Level 3 specification and is universally supported across Chrome, Firefox, Safari, Edge, and mobile browsers.
Can I animate CSS border-radius blobs?
Yes! CSS border-radius is an animatable and interpolatable property. You can use CSS @keyframes or transitions to create liquid, morphing blob animations.
