UtilityKit

40+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Border Radius Generator

Shape corners with unified or per-corner sliders and export shorthand border-radius CSS.

About Border Radius Generator

Border Radius Generator visualizes pill buttons, squircles, and asymmetric cards by tuning each corner independently or locking them together for symmetry. Sliders update a live rectangle preview so you can match design specs quickly. Copy border-radius shorthand or longhand CSS once the curve feels right for chips, panels, or avatars.

Why use Border Radius Generator

  • Match Figma corner radii without mental math
  • Experiment with asymmetric shapes safely
  • Generate shorthand that stays readable in code review

How to use Border Radius Generator

  1. Toggle unified corners or expand per-corner controls
  2. Adjust radius sliders while watching the preview
  3. Copy the emitted border-radius rule

When to use Border Radius Generator

  • Component libraries
  • Marketing cards
  • Avatar masks before clipping assets

Frequently Asked Questions

Can corners differ?

Yes, unlock per-corner mode for independent values.

Does this output percentages?

Controls focus on pixel radii typical for UI kits.

Will shorthand always include four values?

The generator collapses values when CSS allows shorter forms.

Can I mimic circles?

Use equal large radii on square elements for circular masks.

Is this offline friendly?

Yes once the page loads; no API calls are required.

Related tools