littlekit.
Free. No account.
Tool reference

Border Radius Generator: instructions, examples and limits

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

Open Border Radius Generator
Processing location: your browser

This tool is registered for local processing. Its tool input is handled in the current page; LittleKit’s product analytics do not include the input value.

What it does

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

Worked example

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

The example demonstrates the operation. For file-based tools, results depend on the selected file and options.

How the result is produced

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

Important limits

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

Choosing the next step

Start with the representation your design system already uses. Use the contrast checker for a foreground/background pair, then test the actual font size and weight in context. A mathematically valid colour value can still be a poor interface choice.

Colour PickerThe native colour picker supplies an sRGB colour; the tool displays HEX, RGB and HSL equivalents.Contrast CheckerWCAG 2.x: linearize sRGB at 0.04045, L = 0.2126R + 0.7152G + 0.0722B.HEX ↔ RGBHEX encodes three 8-bit sRGB channels in base 16; RGB shows them as decimal values.

See a mismatch between these instructions and the tool? Report a correction with a non-sensitive example.