How to Generate a CSS Border-Radius Declaration

Enter four corner values, select a unit, and generate the CSS border-radius declaration. The output preserves the top-left, top-right, bottom-right, and bottom-left order.

Choose the right inputs for your shape

A CSS border-radius generator is useful when you want to set the curve at each corner without manually arranging the four-part value sequence. The tool creates a border-radius declaration from separate top-left, top-right, bottom-right, and bottom-left values, together with a unit.

This approach suits both consistent cards and layouts with intentionally uneven corners. A single repeated value can describe matching corners, while four distinct entries let you shape each corner independently. The generated result is limited to the border-radius declaration, so add it to the surrounding CSS rule for the element you are styling.

Enter values in clockwise corner order

1. Enter the value for the top-left corner.
2. Enter the value for the top-right corner.
3. Enter the value for the bottom-right corner.
4. Enter the value for the bottom-left corner.
5. Select the unit that should follow each value.
6. Generate the declaration, then review the displayed CSS before using it.

The four corner controls follow a clockwise path beginning at the upper-left: top-left, top-right, bottom-right, and bottom-left. Keep that order in mind when transferring values from a design specification or a sketch. If a corner value is omitted, the tool uses 10 for that corner. If the unit is omitted, the default is px.

The selected unit is placed after every corner value in the generated declaration. For that reason, check the unit as a separate input rather than assuming that changing one number will change the measurement style. If you want matching corners, provide the same value in the four corner controls. If you want a custom silhouette, enter each corner independently.

After generation, compare the declaration with the shape you intended to create. A useful review checks the position of each value, the number attached to it, and the unit that follows it. Once those details match your design, place the declaration inside the relevant selector rule. The generator supplies the border-radius declaration itself; it does not create the selector or the other declarations needed for the element.

Check what each output position means

Read the generated declaration from left to right using the same four-position order as the inputs. The first position represents the top-left corner, followed by the top-right, bottom-right, and bottom-left positions. This makes the output easier to compare with the values you entered.

Four equal values indicate a uniform corner plan, whereas unequal entries represent an asymmetric arrangement. A zero-valued entry represents a corner with no radius in that position. The declaration therefore gives you a compact way to inspect whether the intended variation survived generation.

The unit is part of the generated text for every corner, because the supplied unit is appended to each value. Review that text before adding the declaration to your stylesheet. The output does not describe the complete styling context, so selector placement, dimensions, colors, and other CSS remain outside this result.

Worked example

You are styling a card whose upper-left and lower-right corners should be more rounded than its upper-right corner, while the lower-left corner should remain square.

For a card, enter 18, 6, 24, and 0 for the top-left, top-right, bottom-right, and bottom-left controls, select px, and generate the declaration.

A successful result contains one generated CSS border-radius declaration whose four positions follow the entered corner order and carry the selected unit.

Limitations

• The generated result is a border-radius declaration only; it does not include a selector or the rest of an element's CSS.
• The chosen unit is appended to each supplied corner value, so the generated text reflects that unit at every position.

Common errors

• A corner can look different from the intended design when values are entered in a different sequence. Correct the entries by matching them to top-left, top-right, bottom-right, and bottom-left before generating again.

FAQ

Can I create uniform rounded corners?

Use one identical value in the four corner controls, select the desired unit, and generate the declaration. Matching entries produce evenly rounded corners in the resulting declaration.

Can I use different values for each corner?

Enter a separate number for each corner when the design calls for an uneven shape. The output retains the clockwise positions from top-left through bottom-left rather than merging those entries.

What happens if I omit a value or unit?

When a corner value is omitted, that position receives the default 10; an omitted unit receives the default px. A unit that you supply is then appended to every corner value in the generated declaration.