<- Back to tools

Designer / CSS

Border Radius Generator

Shape corners visually, switch between linked and custom values, and copy border-radius CSS for cards, buttons, and blobs. Tune corners for interface surfaces, explore organic shapes, and copy ready-to-use border-radius values instantly.

px

Unit

Linked

Corner mode

card

Preview

0

Saved shapes

Status

Loaded starter corner radius

Card surface

Rounded corners change the feel of cards, dialogs, and content modules quickly.

CSS output

border-radius: 18px 18px 18px 18px;

Recent shapes

Shapes you generate and reopen will appear here for quick reuse.

Radius breakdown

Top left

18px

Top right

18px

Bottom right

18px

Bottom left

18px

Saved shapes

Save a radius shape you like and reuse it across buttons, cards, and softer surfaces later.

Why this gets reused

Border radius looks simple, but tuning the feel of a surface takes more iterations than people expect.

Linked and custom modes keep the tool useful for both tidy UI work and more playful shapes.

Blob randomization and saved shapes make it practical to revisit instead of starting from zero every time.

Natural pairings

This pairs neatly with the box-shadow and gradient tools when shaping cards, hero modules, and call-to-action buttons.

Percentage radii add a softer designer-focused flavor that keeps the tool from feeling like a plain numeric helper.

Copy-ready CSS, tokens, and Tailwind output make it easy to move directly into implementation.