How do I make a perfect circle with border-radius?

Set the border-radius to 50% on a square element. The 50% value makes each corner a quarter-circle, creating a perfect circle. If the element isn't square, you'll get an ellipse instead.

What's the difference between pixel and percentage units?

Pixel values create fixed-size corners that don't change with element size. Percentage values are relative to the element's dimensions, so a 50% radius on a 200px square creates a 100px corner radius, making a circle. Use percentages for responsive shapes.

How does the border-radius shorthand work?

The shorthand sets corners in clockwise order: top-left, top-right, bottom-right, bottom-left. If you set two values, the first applies to top-left/bottom-right and the second to top-right/bottom-left. Three values set top-left, top-right/bottom-left, and bottom-right.

Can I create asymmetric shapes?

Yes, adjust each corner independently to create organic blob shapes, leaf forms, and other asymmetric designs. The generator outputs the full four-value shorthand when corners differ.

Does border-radius work with border and shadow?

Yes, border-radius clips both borders and box-shadows to the rounded shape. The shadow and border follow the curve of the radius, creating a cohesive rounded element.

Loading tool...

CSS Border Radius Generator

A CSS border radius generator creates rounded corner effects visually by adjusting each corner independently. Use 50% for circles, large values for pills, and asymmetric values for organic shapes. It supports pixel and percentage units, with real-time preview and one-click CSS copy.

100% FreeNo Signup RequiredBrowser-BasedPrivate & Secure

What is CSS Border Radius Generator?

A CSS border radius generator is a visual tool that lets you create border-radius effects by interactively adjusting each corner's radius, previewing the shape in real time, and copying the generated CSS code directly into your project.

Complementary Tools

These tools work great alongside CSS Border Radius Generator:

CSS Minifier CSS Gradient Generator

Start Using CSS Border Radius Generator Today

Rounded corners are a defining feature of modern UI design, and this generator makes creating them effortless. From perfect circles to organic blob shapes, the visual editor with per-corner control gives you the exact border-radius values you need in seconds. Copy the CSS and move on — no more guessing and re-checking values in your stylesheet.

Use CSS Border Radius Generator Free

Table of Contents