OpusDesk Hub Tools

Border Radius Generator

Create a four-corner border-radius declaration.

Preview
CSS Code
border-radius: 16px 16px 16px 16px;

What this tool does

Create a four-corner border-radius declaration. The controls set top-left, top-right, bottom-right and bottom-left radii in that CSS order. Uniform mode synchronizes all corners. Values are clamped to 0–100 pixels and the preview shows the current declaration.

How to use Border Radius Generator

  1. Prepare the input. Choose uniform or individual corner controls.
  2. Run or configure the tool. Adjust radii in pixels.
  3. Check and use the output. Copy the declaration and test it on the actual element.

How this tool works

The controls set top-left, top-right, bottom-right and bottom-left radii in that CSS order. Uniform mode synchronizes all corners. Values are clamped to 0–100 pixels and the preview shows the current declaration.

Worked example

Input: Uniform mode; radius 16

Output: border-radius: 16px 16px 16px 16px;

Limits, assumptions and interpretation

This interface exposes pixel corner radii, not percentage, elliptical slash syntax or arbitrary units.

  • The real element’s dimensions can make the browser scale oversized radii.
  • Clipping contents/images may also require overflow rules in the destination; this generator only writes border-radius.

Supported inputs and limits

  • Uniform mode; radius 16
  • This interface exposes pixel corner radii, not percentage, elliptical slash syntax or arbitrary units.
  • The real element’s dimensions can make the browser scale oversized radii.
  • Clipping contents/images may also require overflow rules in the destination; this generator only writes border-radius.

Frequently asked questions

What does this tool actually do?

The controls set top-left, top-right, bottom-right and bottom-left radii in that CSS order. Uniform mode synchronizes all corners. Values are clamped to 0–100 pixels and the preview shows the current declaration.

What should I check before using the result?

This interface exposes pixel corner radii, not percentage, elliptical slash syntax or arbitrary units. The real element’s dimensions can make the browser scale oversized radii. Clipping contents/images may also require overflow rules in the destination; this generator only writes border-radius.

Is information sent to a server?

Tool inputs are processed in this browser. This product does not use analytics or send your input to an external API. Clicking an external website link still visits that website.

Related tools