Design

Border Radius Generator

Free CSS border-radius generator. Set per-corner radii in px, %, em or rem and get a copy-ready border-radius declaration with a live preview. Percent units make circles and pills.

YOUR WORKSPACEFree to use. No sign-up.

Top-left

Top-right

Bottom-right

Bottom-left

Unit

—

Set the corner values to generate border-radius.

Deep dive guides

A LITTLE CONTEXT · 3 MIN READBorder Radius Explained: Corners, Units, and Shorthand

All 4 related guides

rem vs em vs px: CSS Units Explained — How px, em and rem really differ, the em compounding trap, the 62.5% root trick, and a decision rule for sizing text, spacing and borders.
CSS Shadows: Box vs Text, and How to Write Them — The box-shadow and text-shadow properties compared: offsets, blur, spread, inset, stacked layers, and how border-radius changes the shape of every shadow.
CSS clip-path: Cutting Shapes Out of Boxes — How clip-path crops elements with circles, ellipses, insets, and polygons — and where it differs from border-radius.
Border Radius Explained: Corners, Units, and Shorthand — How border-radius turns sharp boxes into rounded ones: the clockwise corner order, fixed versus percentage units, the 50% circle trick, and shorthand collapse.

How border radius generator works

The CSS border-radius property rounds the corners of an element. A single value like border-radius: 8px rounds all four corners equally; four values set them individually in the order top-left, top-right, bottom-right, bottom-left (a clockwise sweep starting at the top-left).

Units matter. Pixels (px) and em/rem give a fixed roundness, while percentages (%) are relative to the element's size: border-radius: 50% on a square element makes a perfect circle, and 50% on a wide rectangle makes a pill. This generator uses one shared unit across all corners.

Set the four corner values and pick a unit. The preview updates instantly with the generated border-radius applied, and the output is a ready-to-paste CSS declaration. When all four corners match, the shorthand collapses to a single value for tidier code.

Frequently asked questions

What is the border-radius shorthand order?

Four values go top-left, top-right, bottom-right, bottom-left. For example, border-radius: 10px 0 0 10px rounds only the left two corners. Two values set top-left/bottom-right then top-right/bottom-left; three values set top-left, top-right/bottom-left, then bottom-right.

How do I make a circle with border-radius?

Use border-radius: 50% on a square element (equal width and height). On a non-square rectangle 50% produces a pill/oval instead of a circle.

Can I use a different unit per corner?

This generator uses one shared unit across all four corners for a clean, predictable result. For mixed units (e.g. 10px 50%) you can copy the generated value and edit the unit of an individual corner by hand.

Why does the shorthand collapse to one value?

When all four corners are equal, border-radius: 8px is equivalent to border-radius: 8px 8px 8px 8px but shorter. The generator emits the single-value form in that case so your CSS stays tidy.

Border Radius Generator

Deep dive guides

How border radius generator works

Frequently asked questions

Related tools

CSS Unit Converter

CSS Box Shadow Generator

CSS Clip Path Generator

CSS Text Shadow Generator

Aspect Ratio Calculator