Skip to content
Rotina Diária

CSS Border-Radius Generator

Round each corner separately, create elliptical and organic shapes, and copy the CSS with a live preview.

Presets

Processed on your device. Nothing you type is sent anywhere.

How to use: CSS Border-Radius Generator

  1. Move the controls for each corner, or keep Same value for all 4 corners checked.
  2. Choose a unit (px, %, or rem) and turn on elliptical corners to create organic shapes.
  3. Copy the border-radius line in its shortest shorthand form.

About this tool

With four values, border-radius goes clockwise from the top-left corner: top-left, top-right, bottom-right, and bottom-left. The tool automatically shortens the values: 8px 8px 8px 8px becomes 8px, and 8px 0 8px 0 becomes 8px 0.

With a slash (/), each corner gets a horizontal and vertical radius, creating elliptical arcs — that’s how you make organic “blob” shapes. Set the value to 50% to turn a square into a circle. For pill-shaped buttons, use a high px value like 999px.

Frequently asked questions

What’s the difference between px and % for border-radius?

With px, the rounding stays fixed. With %, it scales with the element’s width (horizontal radius) and height (vertical radius), so a rectangle with 50% becomes an ellipse.

Why does 999px create a pill shape?

When the radii add up to more than the element’s size, the browser scales them all down proportionally until they fit, creating perfectly rounded ends.

Is it really free? Is there a daily limit?

It's free with no daily limits. Processing happens on your device, so there's no per-use cost and no need to limit you.

Does it work on phones?

Yes. The site works in any modern browser on Android, iPhone, Windows, Mac, and Linux—no installation needed.

Related tools

View all — Related tools
CSS Box Shadow Generator Create layered CSS shadows with inset options and a live preview, then copy the ready-to-use code. CSS Gradient Generator Create linear, radial, and conic gradients with multiple colors, then copy the ready-to-use CSS. Color Converter Convert colors between HEX, RGB, HSL, HSV, and CMYK, and check the WCAG contrast between two colors. CSS, HTML, and JSON Minifier Reduce the size of CSS, HTML, and JSON by removing comments and whitespace without changing how your code works. Create ZIP Combine multiple files of any type into a single compressed .zip file, right in your browser. Extract ZIP Open ZIP files without installing anything. Preview the contents and download only the files you need. JSON Formatter Format, validate, and minify JSON with helpful error highlighting. Encode and decode Base64 Convert text or files to and from Base64.