Shape & Layout · Free generator

CSS Border Radius Generator

Free · no sign-up Live preview · copy or download the CSS

Change all the borders selected at the same time — or sculpt each corner independently. From a soft 8px card to pills, circles and leaf shapes, with the shorthand written for you.

Settings

preview
Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 20 minThe CSS Box ModelThe box whose corners you're carving.STEP 2 · 15 minCSS Borders & RadiusRadius theory and per-corner order.STEP 3 · 20 minCSS TransitionsAnimating shape changes smoothly.


  1. CSS Box Shadow GeneratorShadows & Effects
  2. CSS Button GeneratorTypography & Buttons
  3. CSS Layer Styles GeneratorShadows & Effects
  4. CSS Clip-Path GeneratorShape & Layout
  5. CSS Glassmorphism GeneratorBackgrounds & Color
  6. CSS Gradient GeneratorBackgrounds & Color


How it works


The shorthand runs clockwise from top-left: TL TR BR BL. Equal values collapse to one; a radius ≥ half the box height makes a pill; 50% on a square makes a circle. Backgrounds, borders and shadows all follow the curve automatically.


The slash syntax (the Blob example) sets horizontal and vertical radii separately per corner — organic "blob" shapes are just asymmetric ellipse corners. Radius participates in transitions too: morphing a square avatar into a circle on hover is one property.


Run the code — try it yourself
Make the avatar a circle, the button a pill, and give the card asymmetric 24px/4px alternating corners.


exercise.html — editable


Frequently asked questions
Why does my radius look clipped on small boxes?
Radii can't exceed half the box; the browser scales overlapping corners down proportionally.
Does border-radius clip child content?
Only with overflow:hidden on the parent — otherwise square children can poke out of round corners.
Pill buttons: which value?
Any radius ≥ half the height; 999px is the conventional 'always a pill' constant.
Can each corner have an elliptical curve?
Yes — the slash syntax gives every corner separate x/y radii; that's how blobs are drawn.


Keep going
Corner radius is a brand decision — 4px reads engineered, 16px friendly, pills playful. Pick one scale and use it everywhere; store it as --radius per the Custom Properties lesson. For shapes radius can't reach, continue to the Clip-Path generator.
CSSmatic is a non-profit project, made by developers for developers.