Free Border Radius Generator — CSS Corners

CSS

Share X / Twitter Facebook LinkedIn WhatsApp

How to use Border Radius Generator

Adjust the corners — together for uniform rounding, individually for shapes.
Watch the live preview — radius personality is impossible to judge from numbers.
Try the blob mode (different horizontal/vertical radii) for organic hero shapes.
Copy the CSS — and standardize on 2–3 radius values across your design.

What is Border Radius Generator?

A border radius generator makes corner-rounding visual: adjust each corner's radius with live preview and copy the border-radius CSS. Uniform rounding is trivial (border-radius: 8px); the generator earns its keep on per-corner control (8px 24px 8px 24px patterns) and the exotic slash syntax — 30% 70% 70% 30% / 30% 30% 70% 70% — where horizontal and vertical radii differ per corner, producing the organic "blob" shapes decorating modern landing pages.

Radius is a tone dial: 0 reads technical, 4–8px professional, 12–24px friendly, 9999px pill-shaped, and asymmetric blobs playful — few CSS properties set a design's personality this directly.

About the Border Radius Generator

Drag per-corner controls, watch the shape update live, and copy the CSS — from a card's subtle 12px to a full eight-value blob.

The practical patterns: consistent radii across a design system (pick 2–3 values — say 6px inputs, 12px cards, 24px modals — and reuse them; random radii read as sloppy); the pill button (radius ≥ half the height, conventionally 9999px); circles (50% on a square element — the avatar recipe); speech-bubble and tab shapes (three corners round, one square); and hero blobs via the slash syntax, often animated between two radius sets for a gentle morphing background.

One geometry note: nested rounded elements look wrong with equal radii — the inner element's radius should be the outer's minus the padding between them (outer 16px, 8px padding → inner 8px), or the corners visibly fight.

Frequently Asked Questions

Clockwise from top-left: top-left, top-right, bottom-right, bottom-left. Two values pair opposite corners; one value rounds all four equally.

Horizontal radii / vertical radii per corner: 60% 40% 30% 70% / 50% 60% 40% 50% gives each corner an ellipse instead of a circle — the blob-shape syntax.

Circle: border-radius: 50% on an element with equal width and height. Pill: any radius at least half the height — 9999px is the idiom, guaranteeing pill at any size.

Equal radii on nested elements create visually mismatched curves. Rule: inner radius = outer radius − gap. A 16px card with 8px padding wants 8px-radius content inside.

Pick a small scale and enforce it: e.g. 4/8/16px or 6/12/24px for inputs/cards/modals. The exact numbers matter less than consistency — mixed arbitrary radii is what reads unprofessional.