CSS Orbit

CSS generators & visual tools

Border radius8 values · blobs

Border radius generator

Pull the eight handles to shape anything from a soft card to an organic blob, then copy the shortest shorthand.

Shape

Yellow handles set horizontal radii, teal ones vertical radii. Drag them, or focus one and use the arrow keys (Shift for steps of 10).

Presets

Values

Unit
px
px

Percentages are relative to the box: horizontal radii to its width, vertical radii to its height.

Top-left
Top-right
Bottom-right
Bottom-left

No corners overlap: every radius is drawn as written.

Your CSS

border-radius: 30% 70% / 70% 30%;

Eight values, one shorthand

Every corner of a box has two radii: a horizontal one along the top or bottom edge and a vertical one along the side. When they differ, the corner becomes a quarter of an ellipse instead of a circle, and that is what turns a rectangle into a pebble or a blob. The shorthand lists the four horizontal radii (top-left, top-right, bottom-right, bottom-left), a slash, then the four vertical ones; this tool collapses repeated values the way CSS allows.

  • % or px: percentages scale with the element, so a blob stays a blob at any size. Pixels keep corners the same size on every box. Switching units converts the values using the box size above.
  • Overlapping corners: if two radii on one side add up to more than the side, browsers shrink all radii by the same factor. That is why 999px makes a perfect pill.
  • Random blob uses four complementary edge positions, which always gives a closed, organic outline.

Border radius questions

What does the slash in border-radius mean?

Values before the slash are horizontal radii, values after it are vertical radii. Without a slash, both are the same and every corner is circular.

Does border-radius clip the content?

It shapes the background, border and box-shadow. Child content still overflows the corners unless the element has overflow: hidden or clip, which also clips images inside it.

Can I animate between two blob shapes?

Yes. border-radius interpolates value by value, so a transition or keyframes between two eight-value shapes morphs smoothly, as long as both use the same units.