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

Color Lightener & Darkener

Generate tints and shades of any color. Click any swatch to copy its HEX, RGB, or HSL code.

Color Code Converter

Convert colors between HEX, RGB, RGBA, HSL, HSLA, and CSS named colors instantly.

Tailwind Shade Generator

Generate a full 11-stop Tailwind CSS color scale from any base color. Export as a JS object or CSS variables.