Tiny Online Tools
Shape corners visually instead of guessing values
border-radius looks simple until you need something more specific than a generic rounded rectangle. This generator lets you adjust each corner visually and see the result immediately, which makes it much easier to fine-tune buttons, cards, inputs, and custom UI shapes.
What you can control
The tool helps you experiment with the most common border-radius patterns:
- one value for all corners
- separate values for each corner
- pixel or percentage units
- quick presets for common rounded shapes
Useful design scenarios
A border radius generator is especially handy when you want to:
- match an existing design system more closely
- test pill, circle, or organic corner shapes
- build reusable CSS for buttons and cards
- avoid trial-and-error in devtools
Remember that unit choice changes the feel
Pixel values create fixed rounding, while percentages respond more to the element's size. If a shape looks right in one component but odd in another, check whether switching units gives you a more consistent result.