Generate a CSS border-radius value

Enter ordinary CSS lengths or percentages, and it returns both the shorthand value and the complete border-radius property. The order follows the CSS specification, so you can style every corner consistently without mentally reconstructing which position controls which corner. Negative radii are rejected because they are not valid border-radius values in production stylesheets.

Choose one to four radius values

Start with the number of values that matches the shape you want. One value applies the same radius to all four corners, which is ideal for cards, buttons, inputs, and other symmetrical components. Two values alternate across opposite corners: the first controls the top-left and bottom-right corners, while the second controls the top-right and bottom-left corners. Three values use the first for top-left, the second for both top-right and bottom-left, and the third for bottom-right. Four values provide independent control in clockwise order: top-left, top-right, bottom-right, then bottom-left. Each entry must be a nonnegative CSS length or percentage, such as 8px, 0.5rem, 12%, or 0. Unitless zero is accepted because CSS permits it, but other nonzero numbers need a recognized length unit or a percent sign. Keeping the input as separate values makes the intended corner mapping visible before the final shorthand is assembled.

Read and use the generated CSS

The result includes two fields for different workflows. The border_radius field contains only the shorthand value, making it convenient when an application already knows which CSS property it is setting or when a design-token pipeline needs a clean value. The css field contains the complete declaration, including the border-radius property name, colon, and semicolon, so it can be pasted directly into a style rule. Values are emitted in the same order you supplied them, with a single space between tokens. The generator does not silently reorder corners, convert units, or collapse repeated values, because preserving the supplied representation makes the output predictable and avoids changing intentional design-token syntax. For example, supplying 8px and 16px produces border-radius: 8px 16px;, while four values produce a clockwise declaration. The output is deterministic and contains no browser-dependent measurement, so the API and in-browser tool return the same strings.

Validate radii before shipping a component

CSS corner radii cannot be negative, so this generator stops with an input error whenever a value begins with a minus sign. It also rejects empty entries, unsupported text, bare nonzero numbers, declarations containing punctuation, and arrays outside the one-to-four-value range. That validation is useful when radius choices come from a form, a configuration file, a theme editor, or an automated design-token build where malformed text might otherwise reach a stylesheet unnoticed. Accepted values cover common absolute, font-relative, viewport-relative, container-independent physical, and percentage units, including px, em, rem, vw, vh, vmin, vmax, ch, cm, mm, in, pt, and pc, along with modern viewport variants. This capability generates the standard single-radius shorthand; it does not create the slash-separated elliptical syntax. If you need elliptical corners, keep horizontal and vertical radii separate in your own CSS. Use the returned declaration as a validated building block, then preview it on the actual element because percentages depend on that element's dimensions.