Border Radius Generator
100% PrivateWebsite & Webmaster ToolsShape corners with per-corner sliders and get the border-radius code, including fancy shapes.
Runs entirely in your browser. Your input is not uploaded to Ovatly or anywhere else.
- 1Move the four corner sliders to set the horizontal radii.
- 2For blob shapes, switch on Fancy mode and set the four vertical radii as well.
- 3Check the preview shape.
- 4Copy the border-radius declaration.
Horizontal radii 30, 70, 70, 30 and vertical radii 30, 30, 70, 70 (in percent) produce: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
- Values are percentages of the element's width (horizontal) and height (vertical), so the same declaration adapts to any element size.
- When vertical radii equal the horizontal ones, the output uses the short form without the slash.
- Extreme combinations can make opposite corners overlap; browsers scale the radii down proportionally, which the preview shows accurately.
Set all eight radii to 50% (or all four to 50% in simple mode) on a square element.
About this tool
The Border Radius Generator shapes corners with per-corner sliders and produces the border-radius declaration, including the fancy slash syntax that separates horizontal and vertical radii. Fancy mode makes the organic blob shapes used for avatars, hero images and decorative panels, with a full-size live preview.
Related tools
Part of Ovatly's free tools in Website & Webmaster Tools.