CleanorTools
CSS

CSS Border-Radius Generator

Details

How to use CSS Border-Radius Generator

What the tool does, how to run it, and what to expect from the result.

How to generate a CSS border-radius

border-radius rounds an element's corners. The shorthand takes up to four values, running clockwise from the top left, so you can round every corner equally or shape each one differently to build a tab, a speech bubble, or an asymmetric card.

The preview is a live element carrying the declaration, so the shape you see is the one your browser will draw. Adjust each corner and copy the result.

  • Set each of the four corner radii, remembering the order runs clockwise from the top left.
  • Watch the preview: if increasing a value stops changing the shape, the browser has clamped it because the radii would otherwise overlap.
  • Copy the border-radius declaration into your rule.
  • Add overflow: hidden to the same rule if the element contains an image or any child that must be clipped to the rounded shape.
  • Swap the pixel values for 50% if you want the shape to stay circular as the element resizes.
Tips

Getting a better result out of CSS Border-Radius Generator

Specific settings and thresholds, not general advice.

  • The four values run clockwise from the top left: top-left, top-right, bottom-right, bottom-left. Getting the order wrong is the most common mistake, and it shows up as a shape that is rotated rather than broken, which is easy to miss in a screenshot.
  • A border radius larger than half the element's size is silently reduced. The browser scales all the corners down proportionally so they never overlap, which means a 200px radius on a 100px box behaves exactly like 50px and no error is raised.
  • Use 50% rather than a large pixel value for a circle, because a percentage adapts to the element's size. A fixed pixel radius that produces a circle at one size becomes a rounded rectangle when the element grows, which is exactly what breaks avatars in responsive layouts.
  • A radius clips the background and the border, and it does not clip child content unless you add overflow: hidden. An image inside a rounded card keeps its square corners and pokes out, which is one of the most common CSS layout surprises.
  • Percentages and pixels behave differently under scaling. A pixel radius stays constant while the element grows, so a card that looks well proportioned at desktop width looks over-rounded on a narrow phone. Pick one or the other deliberately.
Limits

What CSS Border-Radius Generator does not do

The honest boundary, so you do not lose time finding it yourself.

  • It offers pixel values only, so it cannot generate percentage radii, which are what you need for a shape that scales with its element.
  • It does not support the elliptical form, written with a slash, which is how you produce corners that are wider than they are tall.
  • It does not generate the organic blob shapes people often want, which need eight values separated by a slash.
  • It applies the radius to a single element and does not handle the child-clipping problem, which needs overflow: hidden on the parent.
At a glance

Who CSS Border-Radius Generator is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Frontend developers, designers, and anyone styling web pages.

Ideal for

Quickly building border-radius CSS visually without writing it by hand.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

Is the border radius generator free?

Yes. It is completely free to use, with no signup, no account, and no paywall.

Can I use the generated CSS in commercial projects?

Yes. The CSS you copy from the tool is yours to use in any project, personal or commercial, with no attribution needed.

Does it stay local?

Yes. Everything runs in your browser, and nothing you configure is uploaded to a server.

Why is my huge radius having no effect beyond a point?

Because the browser caps it. If the sum of two radii along an edge would exceed the length of that edge, the specification requires every radius on the element to be scaled down by the same factor so the corners cannot overlap. In practice this means any radius above half the element's smaller dimension behaves identically to exactly half of it, which is why 9999px is a well-known idiom for a pill shape: it is guaranteed to be clamped to the maximum.

Should I use pixels or percentages?

Percentages when the shape must scale with the element, pixels when it must not. An avatar wants 50%, because that keeps it circular at any size, whereas a fixed radius that happens to make a circle at 40 pixels becomes a rounded square at 80. A card usually wants pixels, because the corner rounding is a visual constant in your design system and should not grow with the card. The wrong choice is not a bug, it looks subtly off at one breakpoint.

My image is still square inside a rounded card. Why?

Because border-radius clips the element's own background and border, not its descendants. The child image is a separate box and it renders on top, corners and all. The fix is overflow: hidden on the rounded parent, which clips its children to the rounded shape. Be aware that overflow: hidden also creates a new scroll container and can clip a tooltip or a dropdown that was meant to escape the card.

Can I make one corner an ellipse rather than a circle?

Yes, but not with this tool. The full syntax accepts horizontal radii, a slash, and then vertical radii, so border-radius: 50px 50px 0 0 / 20px 20px 0 0 gives you top corners that are 50 pixels wide and 20 pixels tall. That is how you build a soft dome or an organic blob. This generator produces the shorthand with equal horizontal and vertical radii, so you would need to add the slash form by hand.

Does the preview render locally?

Yes. The shape you see is a real element with the generated border-radius applied, rendered by your browser, and nothing you configure leaves the page.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

CCB
UtilityCSS

CSS Coin Border Generator

CSS

Create a decorative milled coin edge with a radial dash ring and copy the CSS. Free, in your browser, nothing is uploaded.

CSS
UtilityCSS

CSS Gradient Generator

Generate CSS gradients

Create linear and radial CSS gradients with custom colors and angle. Live preview and copyable CSS, in your browser.

CAG
UtilityCSS

CSS Animation Generator

CSS

Build a CSS keyframes animation visually with presets and timing controls, then copy the code. Free, in your browser, nothing is uploaded.

CBP
UtilityCSS

CSS background pattern generator

CSS

Generate stripe, dot, grid, and checkerboard CSS patterns with color and size controls. Free, in your browser, nothing is uploaded.

CSS
UtilityCSS

CSS Box-Shadow Generator

Generate CSS box-shadow

Build a CSS box-shadow with offset, blur, spread, color, and inset controls. Live preview and copyable CSS, in your browser.

CSS
UtilityCSS

CSS Button Generator

Generate CSS buttons

Design a CSS button with color, radius, and padding controls, and copy the styles. Live preview and copyable CSS, in your browser.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon
Get it on the App StoreGet it on Google PlayAll platforms & pricing