Border Radius Generator — Rounded Corners & Blob Shapes

Shape corners with simple or eight-value elliptical border-radius to make pills, leaves and organic blobs.

Free, with no sign-up and no watermark. The file is processed in your browser and never uploaded.

Shape corners with border-radius. Use simple four-corner mode for pills and tickets, or eight-value elliptical mode for organic blobs, eggs and leaves. Output is always the shortest valid CSS.

Step by step

  1. Start from a preset: Try Rounded, Pill, Circle, Leaf, Blob, Egg or Ticket.
  2. Choose units: Pick Percent (scales with the element) or Pixels (fixed).
  3. Shape each corner: Adjust the corner sliders; tick Elliptical corners to set horizontal and vertical radii separately, or Same value for every corner to move all at once.
  4. Copy: Copy the CSS or Tailwind value.

Handy for

Organic blobs

Decorative background shapes and image masks.

Pill buttons

Fully rounded ends whatever the height.

Speech bubbles

One sharp corner, three rounded.

Avatars

Circles and squircles for profile pictures.

Good to know

  • Percentages are relative to the element’s own width (horizontal) and height (vertical).

  • If adjacent radii add up to more than the side, the browser scales them down proportionally.

Questions

What does the slash mean?

Values before / are horizontal radii and values after it are vertical radii, corner by corner.

Is anything uploaded?

No. The generator runs entirely in your browser; nothing you type or upload is sent anywhere.

More Web Design tools

  • Neumorphism CSS Generator — Generate soft-UI neumorphic surfaces (flat, concave, convex or pressed) with a built-in contrast check.
  • Font Pairing Tool — Try curated heading and body font pairs, including Hindi-ready ones, and copy self-hosted CSS.
  • Signature Generator — Turn your typed name into a handwritten-style signature, or draw one, and download a transparent PNG or SVG.
  • CSS Box Shadow Generator — Design soft, layered or inset CSS box shadows with live preview and copy-ready CSS or Tailwind classes.
  • Glassmorphism CSS Generator — Create frosted-glass cards with backdrop blur, tint and border, previewed on colourful backgrounds.
  • CSS Clip-Path Generator — Drag polygon points or pick a shape to build a CSS clip-path for images and sections.

All Web Design tools