Open menu

CSS Border Radius & Blob Generator

Round corners the simple way, or build organic blob shapes by dragging four handles that control all eight border-radius values. Generate random blobs, animate a morph between two shapes, and choose from 31 presets including pills, circles, squircles, leaves, drops, arches and blobs. Export CSS, SCSS or Tailwind.

Preset gallery

Accessibility checks

  • Check Blob shapes clip their corners deeply. Add generous padding so text inside never touches the curved edge.

Export code

.shape {
  border-radius: 30% 70% 30% 70% / 60% 40% 60% 40%;
}
Import CSS (copy from a site)

Paste CSS from your site or browser dev tools: a rule or just declarations. Supported properties are loaded into the controls; everything else is listed. You can undo the import.

Favourites on this device (0)

No favourites yet.

Shape
Mode
Shape handles
Preview size & colors

How to use the border radius generator

  1. Choose a mode. Corners sets up to four radii in px or %. Blob gives you four draggable handles.
  2. In Corners mode, link the corners for an even radius or unlink them for shapes like tabs, speech bubbles and leaves.
  3. In Blob mode, drag the handles on the edges, or focus one and use the arrow keys. Random blob gives you a fresh shape each time.
  4. Turn on morphing to animate between your blob and a second shape, and set the duration.
  5. Preview at any size and color, then copy the CSS.

Shape recipes

  • Pill: a large radius such as 999px on a wide element.
  • Circle or ellipse: 50%.
  • Leaf: 0 50% alternating corners.
  • Drop: three corners at 50%, one at 0.
  • Arch: full radius on the top corners only, using elliptical values.
  • Squircle-like: around 30%. True squircles need SVG, but this is a close CSS approximation.

Using blobs well

Blobs make great image masks, decorative backgrounds and avatar frames. Add padding inside so text never touches the curved edge, and combine them with gradients from the gradient generator for a modern look.

How it works

Each corner of a box can have two radii: one along the horizontal edge and one along the vertical edge. border-radius lists the four horizontal radii, then a slash, then the four vertical ones. Equal values give round corners; different values give elliptical ones. The blob editor moves four handles around the edges and turns their positions into those eight percentages, which is why one short line of CSS can describe an organic shape.

Worked examples

Example 1: a friendly hero image

Load Blob 3, set the preview size to match your image (for example 360 × 360) and paste the CSS onto the <img> along with object-fit: cover. The organic outline softens a grid-heavy layout. Click Random blob a few times until the shape suits the photo’s subject.

Example 2: chat message bubbles

Load Speech: three corners at 24px and the bottom-left at 0 point the bubble towards the sender. For messages from the other side, unlink the corners and move the sharp corner to the bottom-right.

Example 3: a living background shape

Load Morph calm and place the element behind your hero text with a soft gradient. The shape eases between two blobs over 10 seconds. Keep it to one or two morphing shapes per page, because the browser repaints them on every frame. They stop automatically for people who prefer reduced motion.

Common mistakes

  • Expecting a circle from a huge px radius: use 50% instead.
  • Text touching curved edges: add padding of roughly a third of the radius.
  • Forgetting overflow: child images need overflow: hidden on the parent, or their own radius, to follow the shape.

Import CSS from your site

Already have a style you like? Open Import CSS (copy from a site), paste a rule or just its declarations from your stylesheet or your browser’s developer tools, and press Import into the controls. This tool reads border-radius in px or %, including the elliptical slash form (the horizontal radii are kept), plus width and height. Everything else, and rules for states such as :hover or media queries, is listed as skipped, and the import can be undone in one step.

Frequently asked questions

What does the slash in border-radius mean?

Values before the slash set the horizontal radius of each corner (top-left, top-right, bottom-right, bottom-left), and values after it set the vertical radius. Different horizontal and vertical radii create elliptical corners, which is how blob shapes are made.

How do the four blob handles map to eight values?

Each handle sits on one edge. The top handle splits the top edge between the top-left and top-right horizontal radii, the right handle splits the right edge between the top-right and bottom-right vertical radii, and so on. Moving a handle changes two values at once, so the shape always stays closed and smooth.

Why doesn't a 999px radius make a circle on a rectangle?

Radii are capped so the corners don't overlap. On a rectangle, a huge radius gives a pill shape. For a circle or ellipse use 50%, which is relative to the element's own width and height.

Can blob shapes animate?

Yes. border-radius can be animated, so the morph option eases between two sets of values. The browser repaints the element every frame, so use it on a few decorative elements. It stops for people who prefer reduced motion.

Does border-radius affect the element's clickable area?

Yes. Clicks and hovers follow the rounded shape, so the cut-off corners of a round button are not clickable. Keep touch targets large enough with padding.

Sources