CSS Border-Radius Generator

Independently adjust the four corners of an element and instantly get the corresponding CSS border-radius value, with a live preview.

Example:

How it works

The CSS border-radius property can take up to four values, one per corner, in the order top-left, top-right, bottom-right, bottom-left. This tool lets you adjust each corner independently and preview the result before copying the code.

How do I create a perfectly round or oval shape?

Set all four corners to a value of 50% using the "%" unit: applied to a square element, this produces a perfect circle; applied to a rectangle, an ellipse.

Why use different values for each corner?

Asymmetrical corners let you create organic shapes or "water drop" effects, often used for notification bubbles or decorative elements.

100% local processing: the calculation happens entirely in your browser via WebAssembly, with no data sent to a server.