This site uses privacy-friendly, first-party analytics to see which pages and tools are useful. No data is shared with third-party trackers or advertisers. Privacy details

Tools · CSS · Border-radius generator

Border-radius generator

Shape every corner of a box, or blend them into an organic blob, and copy the border-radius CSS.

Your result appears here

Add a file and run the tool.

Settings

Adjust the settings below. The result updates as you go.

Drop a file here, or choose one.

Runs fully in your browser. Nothing is uploaded.

Runs fully in your browser. Nothing is uploaded.

How it works

  1. Adjust the linked radius, or turn off "Link all corners" to set each one separately.

  2. Switch to Blob mode, set the smoothness, and click Randomize for an organic shape.

  3. Copy the finished border-radius CSS.

Frequently asked questions

Yes. Turn off "Link all corners" and set each of the four corners independently.

It generates the border-radius shorthand technique used for organic, irregular shapes: a different horizontal and vertical radius per corner. Set how pronounced the effect is with Smoothness, then click Randomize for a new shape.

Yes. Set the radius to 50% for a circle on a square box, or a pill shape on a wide rectangle.

No. Everything runs in your browser.

Guides

A closer look at specific problems this tool solves.

4 min read

Why Every Rounded Corner Looks the Same (and How Blob Shapes Fix It)

The same 8px or 12px radius on every card, button and image is efficient and instantly forgettable. border-radius can do far more than round a rectangle's corners evenly.

Read the guide 4 min read

How to Round Corners and Build CSS Blob Shapes

Simple mode for a clean rectangle, circle or pill. Blob mode for an organic, asymmetric shape. The exact controls for both, and what the generated CSS actually contains.

Read the guide 4 min read

Circle, Pill or Blob: Picking the Right border-radius

An avatar circle, a pill button and an organic background shape all use border-radius, with three different settings: 50% on a square, a px radius of half the height, eight percentages.

Read the guide

Related tools

Box-shadow generator

Build a layered CSS box-shadow with a live preview, then copy the code.

 Clip-path generator

Build a CSS clip-path shape - polygon, circle, ellipse, or inset - with a live preview, and copy the code.

 Glassmorphism generator

Build a frosted-glass card with backdrop blur, transparency, and a soft border, and copy the CSS.

 CSS gradient generator

Build a linear, radial, or conic CSS gradient and copy the code.

 Flexbox playground

Build a CSS flexbox layout - direction, wrap, justify, align, gap, and per-item grow/shrink/basis - with a live preview, and copy the code.

 Grid playground

Build a CSS grid layout - track count, gaps, alignment, and per-item placement - with a live preview, and copy the code.

Comments

  1. No comments yet. Be the first to share your experience.
Your rating (optional)

No rating selected