CSS Border Radius & Blob Shape Generator

Two percentages per corner build an elliptical border-radius. Start from a preset or type your own values, then copy the generated rule.

Runs locally in your browser

View category: Frontend & Design (34)

· border-radius · elliptical corners · blob presets

CONTROL RACK

LIVE STAGE

EXPORT CSS

How to shape a border-radius and copy the declaration

The workbench writes one declaration for the styled element: border-radius with a horizontal and a vertical value for each corner, together with the width and height the preview uses. The stage shows a 280 × 220 px box by default, so the change from 18 % to 50 % radii is visible immediately.

There is no run button — the shape and the Generated code pane follow every change. Copy CSS puts exactly that block on the clipboard, and Reset returns the page to Soft corners (280 × 220, 18 %).

Start from a preset — Custom, Soft corners, Pill, Pebble or Organic blob — or type into the eight corner fields: X is the horizontal radius, Y the vertical one, each between 0 and 100 percent.

Set the preview with Width (120 to 520 px) and Height (120 to 420 px). The box uses those pixel dimensions while the radii stay percentages, which is what makes the same numbers look different on a button and on an avatar.

Watch the stage and the Generated code pane while you type. Editing any field switches the preset selector to Custom, so the preset name always matches what the fields contain.

Out-of-range values snap on commit: a corner of 999 becomes 100, a width of 999 becomes 520 px, 3.7 stays 3.7 in a corner and rounds to 4 px in the size fields.

Press Copy CSS to take the .rounded-shape block, then paste it and rename the class. Reset restores Soft corners at any time.

Presets, elliptical corners and the exported rule

The five presets and the eight corner fields

Custom (28 %), Soft corners (18 %) and Pill (50 % on a 320 × 160 box) are symmetric: all eight values match. Pebble (290 × 230) and Organic blob (280 × 250) mix the corners — Pebble starts at 58 / 42 on the top left and 34 / 62 on the top right, so the outline stops looking like a rounded rectangle.

Every corner takes two percentages because CSS draws an elliptical corner: the first value is the horizontal radius, the second the vertical one. The export lists them in top-left, top-right, bottom-right, bottom-left order, first the horizontal row, then the vertical row after the slash.

Why percentages scale with the element

A percentage border-radius is resolved against the element’s own box, not against a fixed number of pixels, so one declaration can drive a wide button and a small avatar. The Width and Height fields exist to demonstrate that: they resize the preview box, not the declaration’s radii.

The browser also limits radii that would overlap along an edge, so the drawn shape can look smaller than the raw numbers suggest. The Generated code pane always shows the values actually used, which is why the fields snap back into range as soon as you leave them.

The exported rule and local processing

Generated code is a single block: .rounded-shape with width, height and one border-radius line in the horizontal / vertical form. There are no vendor prefixes, media queries or extra selectors, so a paste and a class rename are enough.

The whole tool runs in the page: values and selections never leave the browser. Copy CSS copies the block and the status line confirms it, so the rule is safe to prepare before anything is committed to a stylesheet.