Skip to content
Lizely

CSS Border Radius Generator

Shape four CSS corners visually and copy the shortest correct border-radius declaration.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Enter a radius for each corner in clockwise order.
  2. 2.Choose pixels for fixed curves or percentages for size-relative curves.
  3. 3.Inspect the preview at the displayed box dimensions.
  4. 4.Copy the compressed declaration and test it on the real component.

About CSS Border Radius Generator

CSS Border Radius Generator provides a direct visual way to shape the four corners of a box without repeatedly editing a stylesheet. Set the top-left, top-right, bottom-right, and bottom-left radii, choose pixels or percentages, and watch the preview update. The generated declaration follows CSS clockwise corner order and compresses repeated values into the shortest equivalent shorthand. Four equal corners become one value; alternating opposite corners become two; a shared top-right and bottom-left can become three; otherwise all four values remain visible. This makes the result easier to read while preserving exactly the corner values you selected.

The control order matters because border-radius shorthand does not follow an intuitive left-to-right row. With four values, CSS reads top-left, top-right, bottom-right, then bottom-left. With two values, the first applies to top-left and bottom-right while the second applies to top-right and bottom-left. With three values, the middle value is shared by top-right and bottom-left. The tool labels every corner explicitly, so you do not need to memorize those mappings. The preview uses the generated shorthand itself rather than separate corner properties, which helps expose a serialization mistake before you copy it.

Pixels and percentages create different behavior. Pixel radii remain fixed as the element changes size. Percentage radii are calculated from the dimensions of the border box and can create pills, ovals, leaves, and strongly asymmetric shapes. A value of 50% on a square creates circular corners, while the same value on a wide rectangle produces an ellipse-like end. Browsers may proportionally reduce used radii when adjacent curves would overlap. Therefore an extremely large specified value can render smaller than its number suggests. This normalization is standard browser behavior, not an error in the copied declaration.

Values are limited to a practical nonnegative range. CSS does not allow negative corner radii, and non-finite numbers cannot produce a valid declaration. Zero creates a square corner. The percentage option allows values beyond 100 because CSS accepts percentages and browsers resolve overlapping curves, but very large values often look identical after normalization. The tool produces a single circular radius per corner. CSS also supports elliptical radii with separate horizontal and vertical groups divided by a slash; that advanced syntax is intentionally outside this focused generator.

Rounded corners affect more than decoration. Backgrounds and borders follow the curve, and overflow clipping can follow an inner rounded edge. Very large radii may reduce the clickable corner area, so buttons and controls should still meet appropriate touch-target sizes. Content can visually crowd a curve when padding is too small. After copying the declaration, test it with the element's real width, height, border, padding, focus outline, and responsive breakpoints. Do not rely on rounded shape or color alone to communicate meaning.

Everything runs locally in the browser. No design values are uploaded or stored, no account is needed, and no new dependency is loaded. Use the preview to explore, copy the CSS, then verify the declaration in the actual component. For a uniform card start with 12px to 24px. For a pill use a large pixel radius or 50%, provided the element has enough horizontal padding. For an organic panel, vary all four percentages. The generator is a production aid, not a replacement for testing keyboard focus, overflow, contrast, and target size.

Methodology & sources

Validates four nonnegative numeric radii and a px or percentage unit, then applies CSS clockwise shorthand compression rules and uses the same generated value for the visual preview.

Frequently asked questions

Why did four values become one or two values?
The generator compresses repeated corners into the equivalent CSS shorthand. The rendered result remains the same.
Why can a very large radius look smaller than expected?
Browsers proportionally reduce overlapping corner curves so adjacent radii fit within the border box.
Does this support elliptical slash syntax?
No. This focused generator uses one radius per corner. Separate horizontal and vertical radii require the advanced slash syntax.

Related tools

Developer Tools guides

View all