What order are the four corner values written in?

border-radius lists corners clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. When all four are equal the tool outputs a single shorthand value.

How do I make a circle or pill shape?

Set a large radius such as 9999px (or 50% in your own CSS) on all corners. A square element becomes a circle and a wide element becomes a pill.

Is anything uploaded?

No — the border-radius value is generated entirely in your browser and nothing is sent anywhere.

When does the tool output one value versus four?

When all four corners share the same radius the tool collapses to the single-value shorthand, for example 16px. As soon as any corner differs it writes all four values in clockwise order.

Should I use px or percent for border-radius?

Pixels give a fixed corner size that stays the same as the element resizes. Percentages are relative to the element's width and height, so 50% always yields a full ellipse. This tool outputs pixel values; switch to % in your own CSS if you want a responsive curve.

Why do my rounded corners get clipped or look square?

A child element or image can overflow past rounded corners. Add overflow: hidden to the rounded container so its children are clipped to the same radius.

Can a single corner be rounded while the others stay square?

Yes. Uncheck Link all corners and set just one corner to a value while leaving the others at 0. The tool will write out the four-value form, such as 16px 0px 0px 0px.

CSS Border Radius Generator

CSS border-radius generator

This tool rounds the corners of an element and gives you the exact border-radius value to paste into your stylesheet. It is for developers and designers shaping buttons, cards, avatars and pills who want precise, copy-ready CSS. The preview shows a live box that reshapes as you drag.

How it works

The border-radius property accepts either a single value applied to all corners or up to four values written clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. With Link all corners on, moving any slider sets all four equally. With it off, each corner gets its own value. The generator detects when all four match and collapses the output to the shorthand single value; otherwise it writes all four in clockwise order.

Example

With all corners linked at 16px, the output collapses to:

border-radius: 16px;

Unlink and set top-left and top-right to 16px while leaving the bottom corners at 0px, and it becomes border-radius: 16px 16px 0px 0px; — a tab or card-header shape.

Goal	Value
Subtle rounding	8px
Card	16px
Pill (wide element)	9999px
Circle (square element)	50%
Top corners only	16px 16px 0px 0px

The border-radius value is generated locally in your browser — nothing is uploaded.