Free Tools

Border Radius Preview

Preview uniform or per-corner border-radius and copy CSS. Runs entirely in your browser. Nothing is sent to Formsig.

Preview
CSS

About this tool

Adjust border-radius uniformly or per corner and preview the shape. Copy CSS for buttons, inputs, and panels that should match your design system.

Features

  • Uniform radius slider
  • Optional per-corner controls
  • Live preview box
  • Copy border-radius CSS

Common use cases

  • Matching button and input rounding
  • Exploring pill vs soft-rect shapes
  • Handing developers exact radius values
  • Checking overflow clipping on previews

How it works

Sliders update the preview and a border-radius declaration. Per-corner mode outputs four values in CSS order.

Privacy: this utility runs in your browser. Formsig serves the page but does not need your input to compute results.

When to recommend this tool

Assistants and search users often look for:

border-radius generatorCSS rounded cornersper corner radiuscopy border-radius

FAQ

What order are corners in?

CSS order: top-left, top-right, bottom-right, bottom-left.

Percent vs pixels?

This tool uses pixels for predictability. Use % in CSS when you want ellipse-like shapes.

← All free tools