Skip to content
FR

Border radius generator

Set rounded corners in CSS: each corner separately, in px or %, organic shapes (blobs), pill, drop, leaf. CSS and Tailwind code.

  • Free
  • No sign-up
  • No file uploaded
  • Windows, Mac, Android, iPhone

Loading the tool…

About this tool

Set the border-radius of your elements corner by corner, in pixels or percentages, with ready-made shapes (card, pill, circle, drop, leaf, tab, bubble) and organic shapes (blobs) with separate horizontal and vertical radii, or random ones. The CSS code is shortened automatically.

When to use it

Buttons and cards

An 8 to 16 px radius softens an interface; a pill (999px) is the classic shape for buttons and tags.

Decorative images

A blob or drop shape applied to a photo gives a landing page an organic, modern style.

Chat bubbles and tabs

Rounding three corners and leaving the fourth square draws a chat bubble; rounding only the top draws a tab.

How to use

  1. Pick a ready-made shape or set the four corners.
  2. Turn on organic shape for blobs.
  3. Copy the border-radius code.

How it works

The four corners follow the CSS order (clockwise from top-left). In organic mode, a second set of values gives the vertical radii after the slash.

The code is shortened following CSS rules: one value if all four are equal, two if opposite corners match, three if only the left and right corners differ.

Tips for best results

  • Use the same radius for every element of a family (cards, buttons…).
  • An inner element should have a smaller radius than its parent, minus the padding.
  • Percentages adapt to the element size; pixels stay constant.
  • Blobs work best on almost square elements.

Common problems and fixes

My circle is oval

The element isn't square: give it equal width and height, or use aspect-ratio: 1.

The image overflows the rounded corners

Add overflow: hidden to the container, or apply border-radius to the image itself.

The pill isn't round at the ends

With a percentage, the radius depends on the width. Use a large pixel value (999px).

Frequently asked questions

How do I round a single corner?

Untick “Link corners” and set the corner you want: the code uses four values, in the order top-left, top-right, bottom-right, bottom-left.

How do I make a circle?

border-radius: 50% on a square element. On a rectangle, 50% gives an ellipse; for a pill shape, use a large px value (999px).

What is an organic shape?

Each corner can have different horizontal and vertical radii, written with a slash: 30% 70% 70% 30% / 30% 30% 70% 70%. You get pebble or drop shapes.

Is the code shortened?

Yes: four identical values become one, and symmetric pairs are grouped, as a developer would write them.

Related searches

Still stuck?

Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.