Free tool

Border Radius Generator

Rounded corners with full control or organic shapes with the two-axis syntax. Tweak, preview and copy the CSS.

Link corners
.element {
  border-radius: 16px;
}

Built by

Miguel Ángel Colorado Marin (MACM)

Full-Stack Developer · Guadalajara, España

I develop web apps, digital tools and full projects — from design to deployment.

GitHubLinkedInBuy me a coffee
Contact me

The border-radius property looks trivial until you need something beyond "all corners equal". Each corner takes its own radius and, with the extended two-axis syntax (horizontal / vertical), they become organic shapes: drops, leaves, pebbles or asymmetric blobs perfect for decorative avatars, hero cards and illustrative backgrounds without a single image. This generator gives you both worlds: a classic mode with the four corners linked or independent, and a blob mode with curated presets plus a random button to discover new silhouettes. Classic corners use pixels while blobs use percentages, so shapes scale with the element.

Features

  • ✓Simple mode with linked corners
  • ✓Independent control of all 4 corners
  • ✓Organic blob shapes with horizontal / vertical syntax
  • ✓5 blob presets plus a random generator
  • ✓Live preview over a gradient background

How to generate a border-radius?

  1. 1

    Pick the mode

    Classic pixel corners or percentage-based organic shapes.

  2. 2

    Tune the values

    Per-corner sliders, blob presets or randomize.

  3. 3

    Check the preview

    The actual result renders instantly over a gradient.

  4. 4

    Copy the CSS

    A single value ready for your stylesheet.

Frequently asked questions

What does the slash mean in blob syntax?

Each corner has two radii: one horizontal and one vertical. Values before the slash are the horizontal radii of the four corners and after it, the vertical ones. Mixing them produces the organic curves.

Why use percentages for blobs?

With percentages the shape adapts to element size: the same blob works on a 48px avatar and a 400px card without recalculating.

Is anything uploaded to a server?

No, the value is generated by combining your options directly in your browser.

Related tools

Glassmorphism Generator

Frosted-glass effect with blur and transparency.

Clip Path Maker

CSS shapes with draggable vertices.

CSS Box Shadow Generator

CSS shadows with multiple layers and live preview.

Neumorphism Generator

Soft UI with dual shadow and light angle.

Embed Border Radius Generator on your site

Add Border Radius Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.

<iframe
  src="https://miguelacm.es/embed/border-radius-generator"
  width="100%"
  height="700"
  frameborder="0"
  title="Border Radius Generator — miguelacm.es"
></iframe>
View embed in new tab →
View source on GitHub