Generate CSS border-radius. Visual tool with live preview and CSS code output.
border-radius: 16px;
Use the visual controls to design.
See the live preview update.
Copy the generated CSS code.
Use the Border Radius Generator when creating custom rounded shapes for UI elements like cards, buttons, avatars, and decorative containers. It is especially useful for creating organic blob shapes using the 8-value border-radius syntax that is difficult to write manually. Designers use it to experiment with different corner radii before finalizing component designs.
Yes, adjust border-radius for each corner independently (top-left, top-right, bottom-right, bottom-left) or set them uniformly. The tool supports both simple radius values and the advanced 8-value syntax for creating complex organic shapes with separate horizontal and vertical radii.
The tool generates the standard CSS border-radius property using pixel, percentage, or rem values. It outputs both the shorthand property and individual corner properties (border-top-left-radius, etc.) for maximum compatibility across browsers and CSS frameworks.
Yes, save custom border-radius configurations and access built-in presets for common shapes like circles, pills, rounded rectangles, and organic blob shapes. The preset library provides instant access to popular design patterns used in modern UI design.
