What is the Border Radius Generator?#
The Border Radius Generator shapes the corners of a box and writes the CSS for you. Refine each corner in Standard mode, or morph smooth blob forms in Blob mode. The finished line can be copied into your stylesheet.
It produces a single border-radius line or a Tailwind class. Pick the format in the output box and paste it wherever the shape belongs.
How to Use#
Shape corners in Standard mode#
- Pick px or % for the unit.
- Drag the All corners slider and check the preview.
- Turn “Link all corners” off to shape each corner on its own.
Morph shapes in Blob mode#
- Drag the Top, Right, Bottom, and Left sliders. Each edge slider reshapes the two corners on that edge.
- You can also drag the handles on the preview directly.
Finish#
Copy the CSS or Tailwind class from the output box.
Options#
- Standard: adjust each corner with circular arcs. Unit, link, and presets live here.
- Blob: four edge sliders morph a balanced organic shape. The unit stays at %.
- Unit: px stays fixed. % is relative to the element, so the shape scales with it.
- Link all corners: one slider drives the whole shape. Turn it off for four separate sliders.
- Presets: Square, Slight, Rounded, and Circle in one click.
- Outline: shows the original square as a dashed frame behind the shape.
- Handles: shows edge handles on the preview in Blob mode for direct reshaping.
Common Use Cases#
- Rounding buttons and cards to match a design.
- Testing % values before writing them into a stylesheet.
- Building circular avatars.
- Sketching organic blob shapes for headers and backgrounds.
FAQ#
The Circle preset makes a circle — it switches the unit to % for you. The element itself must be square, since 50% of a rectangle draws an oval.
The four sliders control the top, right, bottom, and left edges. Each one sets a mirrored pair of corners, so the shape stays balanced while you drag.
The first group is the horizontal radius of each corner, the second is the vertical radius. Blob mode writes the slash form only when the two groups differ; when they match, the output stays a single group.
Parts with a fixed size, like buttons and cards, take px. For shapes that follow the element, like avatars, % is recommended.
The first value applies to the top-left and bottom-right corners, the second to the top-right and bottom-left corners. A single value covers all corners, and three or four values run clockwise from the top left.
Layout stays the same — the size, margin, and padding are unchanged. The clickable area follows the rounded shape, so the cut-off corners are not clickable. Content that sticks out into a rounded corner is cut off by setting overflow: hidden on the parent.
Notes#
- Switching modes keeps both sets of values.
- Turning “Link all corners” back on keeps the top left value and overwrites the other three corners.