CSS Border Radius Generator

How to Use the CSS Border Radius Generator

1. Start in Simple mode and drag the four corner sliders to set each corner's roundness.
2. Watch the preview box: it uses your exact values, so judge the shape at the size you plan to use it.
3. Switch to Advanced mode if you want organic blob shapes with different horizontal and vertical radii.
4. Use a preset (circle, pill, leaf, blob) as a starting point if you are exploring.
5. Copy the CSS output and paste it onto your element, adding your own background to see it in context.

Key Features

• Independent sliders for all four corners in simple mode, with values in pixels or percent.
• Advanced eight-value mode producing the slash syntax used for blobs and organic shapes.
• One-click presets: full circle, pill, leaf corners and a starter blob.
• Live preview on a real element, not a picture, so the rendering is exactly what browsers will do.
• Copy-ready CSS with both the shorthand and, in simple mode, the individual corner properties.

Best Practices and Tips

• Use percentages when the shape must stay proportional at any size; use pixels when the corner itself must stay fixed.
• A radius of 50 percent on a square makes a circle; on a rectangle it makes a pill with fully rounded short sides.
• Large radii on small elements flatten out visually: preview at the real display size before committing.
• Save blob values you like as utility classes; good organic shapes are hard to rediscover by dragging again.

Common Mistakes to Avoid

• Expecting border-radius to clip overflowing child content: add overflow hidden if children must respect the curve.
• Copying the shorthand and later overriding one corner with a longhand written before it in the stylesheet, which loses.
• Using huge pixel radii on responsive elements, where the corner then grows relative to nothing on small screens.
• Forgetting vendor prefixes are history: modern browsers need no prefixes for border-radius at all.

Frequently Asked Questions

What does the slash in border-radius values mean?

The values before the slash are the horizontal radii of the four corners and the values after it are the vertical radii. Different horizontal and vertical values make elliptical corners, which is the trick behind blob shapes: 30% 70% 70% 30% / 30% 30% 70% 70% is the classic starter blob.

How do I make a perfect circle with CSS?

Make the element square, then set border-radius: 50%. The generator's Circle preset does this. If the element is rectangular, 50% gives an ellipse or pill depending on the proportions.

Should I use px or % for corners?

Pixels keep the corner size constant as the element resizes, which suits buttons and inputs. Percentages scale the corner with the element, which suits avatars, image frames and decorative shapes. The generator can output either.

Why does my background image ignore the rounded corners?

The image itself needs the radius, or its container needs overflow: hidden alongside the radius. Border-radius rounds the element's own background automatically, but child content overflows visibly unless clipped.

Is the generated CSS all I need?

For the shape itself, yes: border-radius is universally supported without prefixes. You will still style background, size and borders yourself; this tool's job is purely the corner geometry.

Related Tools

• CSS Gradient Generator – design linear and radial CSS gradients and copy the code
• CSS Box Shadow Generator – design soft, realistic CSS box shadows with sliders and presets
• PX to REM Converter – convert pixel sizes to rem and em for responsive CSS
• Image Resizer – resize images to exact pixel dimensions with aspect lock and presets