Border Radius Generator: CSS Shorthand and Live Preview

How to use the css border radius generator

1. Enter the horizontal and vertical radius for each of the four corners.
2. Choose your preferred unit: px or %.
3. The CSS shorthand updates instantly below the fields.
4. Check the SVG preview to verify the shape visually.
5. Copy the generated border-radius declaration into your stylesheet.

How the CSS border-radius shorthand works

The CSS border-radius property accepts up to eight values separated by a slash. The values before the slash set the horizontal radii; those after set the vertical radii. Both groups follow the clockwise order: top-left, top-right, bottom-right, bottom-left.

CSS allows you to omit trailing values when they match earlier ones. If all four horizontal radii are identical, you write just one number. If bottom-left equals top-right, you can drop it. The same logic applies to the vertical group. This border radius generator always outputs the shortest valid form.

For example, if every corner has a horizontal radius of 12px and a vertical radius of 12px, the full longhand would be border-radius: 12px 12px 12px 12px / 12px 12px 12px 12px;. Because all values match, the shorthand collapses to simply border-radius: 12px;.

Common border-radius patterns

Here is a reference table of frequently used shapes and their corresponding CSS declarations. You can reproduce any of these by entering the matching values into the fields above.

Pixels versus percentages

Choosing between px and % changes how the radius scales. Pixel values produce a fixed curve regardless of element size. A border-radius: 16px button looks the same whether it is 100px wide or 400px wide.

Percentage values are relative to the element's own dimensions. A horizontal percentage refers to the element's width, and a vertical percentage refers to its height. Setting border-radius: 50% on a square element creates a perfect circle, but on a rectangle it creates an ellipse. Use percentages when you want the curvature to scale proportionally with the container, such as in responsive layouts built with tools like the CSS grid generator or flexbox generator.

Using this border-radius CSS generator in practice

A dedicated border-radius CSS generator saves time because writing the slash syntax by hand is error-prone. Developers often forget that the order is top-left, top-right, bottom-right, bottom-left, or they misplace the slash. This tool handles the ordering and the shorthand reduction automatically.

The SVG preview renders the exact path your CSS will produce. When you adjust a single corner, you immediately see whether the curve overlaps or leaves a gap. For complex UI components like chat bubbles, cards with mixed corners, or custom toggle switches, visual feedback prevents trial-and-error in the browser dev tools.

If you need to convert the resulting pixel values to relative units later, pair this tool with the px to rem converter or the em to px converter.

Edge cases and browser behavior

When adjacent corner radii are so large that they overlap, browsers proportionally reduce them to fit. The CSS specification defines this algorithm: the ratio of each radius to the sum of the two adjacent radii along the same edge determines the scaling factor. You do not need to calculate this yourself, but it means setting every corner to 9999px safely produces a pill shape rather than breaking the layout.

Negative values are invalid in CSS. This tool rejects them before generating output. Zero values are valid and produce a sharp corner. When all eight values are zero, the generator outputs border-radius: 0;, which is useful for resetting inherited styles.

Worked examples