Border Radius Generator
Build a CSS border-radius (per-corner) with a live preview.
Worth Knowing
Border-radius rounds an element's corners, and each corner can take two radii — horizontal and vertical — which together let you create not just circles but ellipses and organic, asymmetric 'blob' shapes far beyond simple rounded rectangles. Setting the radius to 50% on a square turns it into a perfect circle, the standard trick for circular avatars. A visual generator earns its keep here because the per-corner, two-value syntax is genuinely difficult to visualize from the raw CSS.
How to Use
- Paste or type your top-left (px) into the Border Radius Generator above.
- Set any additional options: Top-right (px), Bottom-right (px), Bottom-left (px).
- The output updates instantly and is ready to copy.