littlekit.
Free. No account.

Border Radius Generator

CSS corner order is top-left, top-right, bottom-right, bottom-left.

Your inputs stay in your browser. No account required.
Loading tool controls…

How Border Radius Generator works

CSS corner order is top-left, top-right, bottom-right, bottom-left.

Try an example

16px 0px 16px 0px rounds opposite corners.

Good to know

Circular pixel radii only. Browsers scale overlapping radii to fit the element.

Your privacy

Processing happens on this device for this tool. We do not upload your input, put it in share links or save it to your favourites. Closing this tab discards the working input; downloaded results remain wherever you save them.

When this tool is useful

Use Border Radius Generator when you need a quick, local result and want the rule or limitation visible alongside it.

How to use it

  1. Enter the input using the labels shown.
  2. Run the operation and review the result.
  3. Download or copy the result only after checking it.

Checks before you rely on the result

  • Circular pixel radii only. Browsers scale overlapping radii to fit the element.
  • Keep the original input when the operation creates a new copy.
  • Use the related tools below when the next step needs a different format.

This page is maintained with the tool implementation and its deterministic tests. If the result looks wrong, report the issue with a non-sensitive example.

Read the Border Radius Generator instructions

A useful next step

Colour Picker
Contrast Checker
HEX ↔ RGB
Made for clarity. Built to be useful.Report an issue