What is Border Radius Generator?

Border Radius Generator is a free online tool. Visually generate irregular border-radius CSS code No signup required - use it directly in your browser.

Is Border Radius Generator free?

Yes, all tools provided by WebTools are completely free to use with no signup required.

Is Border Radius Generator safe?

Absolutely safe. All data processing happens locally in your browser. Nothing is uploaded to any server, ensuring your privacy is fully protected.

Do I need to install software to use Border Radius Generator?

No installation needed. All tools run in your browser - just open the page and start using them immediately.

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

Set the border-radius to 50% on a square element. The element must have equal width and height for a perfect circle.

What is the difference between pixel and percentage values?

Pixel values create a fixed curve radius regardless of element size. Percentage values are relative to the element's dimensions, so a 50% radius on a square creates a circle, while on a rectangle it creates an ellipse.

Can I set different horizontal and vertical radii?

Yes, you can use the elliptical border-radius syntax (e.g., border-radius: 50% 30% / 40% 60%) to set different horizontal and vertical radii for each corner, creating more complex shapes.

What is a pill shape?

A pill shape is created by setting border-radius to a very large value (e.g., 9999px) on a rectangular element. This creates fully rounded ends, commonly used for buttons and tags.

Does border-radius affect the element's box model?

Border-radius only affects the visual rendering of the element's corners. It does not change the element's layout, box model dimensions, or how it interacts with other elements in the flow.

Is my data sent to any server?

No. All border-radius generation and preview rendering happens entirely in your browser. No data is transmitted anywhere.

Border Radius Generator

Craft precise CSS border-radius values with a real-time visual preview. Adjust each corner independently, create perfect circles, pill shapes, or organic blob shapes, and copy the generated CSS code instantly.

Presets

Unit

Radius

Top Left16px

Top Right16px

Bottom Right16px

Bottom Left16px

PreviewDrag corners to adjust

CSS Code

border-radius: 16px;

CSS Border Radius Generator

Independent control for all four corners
Visual preview with live updates as you adjust
Link all corners for uniform border radius
Presets for common shapes like circles, pills, and blobs
Support for horizontal and vertical radius per corner
One-click copy of the generated CSS border-radius property
All processing happens locally in your browser

How to Create CSS Border Radius

1
Adjust corner radii
Use the sliders for each corner (top-left, top-right, bottom-right, bottom-left) to set the radius values.
2
Link or unlink corners
Toggle the link button to adjust all corners simultaneously or control each corner independently.
3
Try shape presets
Use the preset buttons to quickly create common shapes like circles, pills, or organic blob shapes.
4
Preview and copy
View the live preview and click copy to get the CSS border-radius code for your project.

Border Radius Generator

CSS Border Radius Generator

How to Create CSS Border Radius

Frequently Asked Questions

Related Tools

Border Radius Generator

CSS Border Radius Generator

How to Create CSS Border Radius

Frequently Asked Questions

Related Tools