Tiny Toolkit

Border Radius Generator

Visually adjust CSS border-radius values and see the result update live. Set all corners together or unlock them to configure each independently. Toggle between pixel and percentage units, then copy the generated shorthand CSS in one click — no hand-coding required.

All processing happens in your browser. No data is sent to any server.

Frequently Asked Questions

Can I set each corner to a different radius?
Yes. Click the lock icon to unlink all four corners, then adjust each one (top-left, top-right, bottom-right, bottom-left) independently.
Can I use percentage values as well as pixels?
Yes. Toggle between px and % units. A value of 50% on a square element creates a perfect circle.
How do I create a pill / capsule shape?
Set border-radius to 9999px (or 50% on a square element) to produce a fully rounded pill shape.

Related Tools

Type Scale Generator — Modular Typography Scale

Generate a modular type scale from any base size and ratio. Choose from Perfect Fourth, Golden Ratio, and more — get px, rem, CSS variables or Tailwind config output. Free.

Font Size Converter — pt to px to rem

Convert font sizes between pt (print), px (screen), and rem. Set your root font size and see all three equivalents instantly. Includes a reference table of 17 common print sizes. Free.

Color Lightener & Darkener — Generate Tints and Shades

Generate lighter tints and darker shades of any color. See the full scale from white to black with one-click copy of HEX, RGB, or HSL values for each swatch. Free.