Make rounded corners and blob shapes with a border radius generator
The Border Radius Generator writes the CSS border-radius property for you. Round all four corners at once or set each corner on its own, in px, % or rem, and see the result instantly on a preview box you can resize to match your real element.
Switch to Elliptical · 8 values mode to unlock the shapes most people do not know CSS can draw: every corner gets a separate horizontal and vertical radius, and you shape them by dragging handles along the edges of the box. That is how designers make the soft, organic “blob” shapes used behind hero images, avatars and illustrations — no SVG needed.
How to use the Border Radius Generator
- Choose “Corners” mode for ordinary rounded corners, or click a preset such as Pill, Circle, Tab or Blob 1.
- Leave “Link all corners” ticked to round every corner equally, or untick it to set top left, top right, bottom right and bottom left separately. Pick px, % or rem.
- For organic shapes, switch to “Elliptical · 8 values” and drag the white handles on the preview. Tick “Blob mode” to get one handle per edge.
- Resize the preview box and change its fill colour so it matches the element you are styling.
- Press “Copy CSS”. Tick “Also show longhand properties” if you prefer the four separate corner properties.
Border Radius Generator features
Three units
Work in pixels for fixed corners, rem to scale with the user’s font size, or percentages for shapes that adapt to any element size.
Shortest valid shorthand
The output is compressed to the shortest equivalent form — one, two, three or four values — and the slash part is dropped when it is not needed.
Draggable 8-handle editor
Shape elliptical corners directly on the preview with a mouse or a finger, or focus a handle and nudge it with the arrow keys (hold Shift for steps of 10).
Blob mode
Pairs the radii on each edge so they always add up to 100%, which guarantees smooth, continuous curves with no flat sections.
Ten presets plus random
Rounded, pill, circle, squircle-ish, tab, leaf, egg and three blobs — or press “Random blob” for a new organic shape.
How the border-radius shorthand works
Values are listed clockwise from the top-left corner: top-left top-right bottom-right bottom-left. As with margin and padding, shorter lists repeat: two values mean “top-left and bottom-right, then top-right and bottom-left”, and three values mean “top-left, then top-right and bottom-left, then bottom-right”.
Each corner is really a quarter of an ellipse. A slash separates the horizontal radii from the vertical radii: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% gives every corner a different ellipse. Percentages for horizontal radii refer to the element’s width and vertical radii to its height — which is why 50% turns a square into a circle but a rectangle into an ellipse.
What happens when corners overlap
If the radii along one side add up to more than that side’s length, the CSS Backgrounds and Borders specification tells browsers to shrink all radii by the same factor until they fit. That is why border-radius: 9999px is the standard trick for a pill: the huge value is scaled down until the short sides become perfect semicircles, whatever the element’s size.
The elliptical editor follows the same rule. Outside blob mode a handle cannot be dragged past its neighbour on the same edge, so what you see on the handles is exactly what the browser draws.
Practical tips
- Use
overflow: hidden(oroverflow: clip) on a rounded container so images and child elements are clipped to the curve. - Nested rounded boxes look best when the inner radius equals the outer radius minus the padding between them.
- Prefer rem for buttons and cards that should grow with text size; convert existing pixel values with the PX to REM Converter.
- Combine a blob with a gradient from the Gradient Generator and a soft shadow from the Box Shadow Generator for modern hero decorations.
- True squircles (superellipses) are not possible with border-radius alone. The CSS Borders Level 4 draft adds a
corner-shapeproperty for that, which newer Chromium browsers have begun to support; until support is universal, a percentage radius is a good approximation.
Border Radius Generator FAQ
How do I make a circle with CSS?
Give the element equal width and height and set border-radius: 50%. Click the Circle preset to see it. On a rectangle, 50% produces an ellipse instead.
How do I make a pill-shaped button?
Use a very large radius such as border-radius: 9999px. Browsers scale it down so each end becomes a perfect semicircle, no matter how long the button is.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and values after it are vertical radii, which lets each corner be elliptical. This border radius generator writes the slash only when the two lists differ.
Should I use px, % or rem for border radius?
Pixels give a fixed curve, rem scales with the root font size, and percentages scale with the element itself — ideal for circles and blobs that must keep their shape at any size.
How do I create a CSS blob shape?
Switch to Elliptical mode, tick Blob mode and drag the four edge handles, or press “Random blob”. The result is a single border-radius declaration with eight percentage values.
Why are my rounded corners not clipping the image inside?
Border radius only rounds the element’s own background and border. Add overflow: hidden to the container, or put the radius directly on the image.