About the Handiwork CSS Border Radius Generator
Create rounded corners visually with linked or independent controls for all four corners, then copy a ready-to-use CSS border-radius declaration for cards, buttons, images, and panels.
How to use the Handiwork CSS Border Radius Generator
- Keep the corners linked for a uniform radius or unlink them for an asymmetric shape.
- Adjust each corner with the sliders and review the live preview.
- Copy the generated four-value border-radius declaration.
Uniform and asymmetric corners
A single radius creates a consistent shape, while separate corner values let you make pills, cards, tabs, and custom organic layouts.
How the shorthand values work
The four values run clockwise from the top-left corner: top-left, top-right, bottom-right, and bottom-left. When all four values match, the declaration can be shortened to one value.
Choose a radius that fits the component
Small radii suit dense controls and content cards. Larger radii work well for softer, friendly interfaces, but excessive rounding can reduce usable space in compact components.
Pixels versus percentages
This tool uses pixel values for predictable corners. CSS also supports percentages, which can be useful for fluid shapes, circles, and responsive media.
Assumptions and limitations
- The preview uses one square element rather than your final component dimensions.
- Values are limited to 100 pixels for simple visual editing.
- The output uses the four-value pixel shorthand syntax.
- A pill or circle may require a radius relative to the element height or width.
Frequently asked questions
What order are the four values?
They are top-left, top-right, bottom-right, and bottom-left, moving clockwise from the top-left corner.
Can I use percentages instead of pixels?
This tool currently outputs pixel values; you can replace the units manually when you need fluid or circular shapes.
How do I make a pill button?
Use a large radius, often half the button height or more, and make sure the button has enough horizontal padding.
How do I make a circle?
Use a square element and set border-radius to 50% in your CSS. The generator is intended for pixel-based corner values.
Why do corners appear smaller than expected?
The browser limits overlapping corner radii so they fit within the element’s available width and height.