CSS Border Radius Generator
Visually design border radius for all four corners. Use presets or fine-tune each corner individually.
Visually design border radius for all four corners. Use presets or fine-tune each corner individually.
The border-radius property lets you create rounded corners on any HTML element. Our visual generator provides an intuitive way to design custom border radii with independent control over each corner. Whether you want a subtle rounded rectangle, a perfect circle, or an asymmetric organic shape, this tool makes it simple.
Adjust the sliders for each corner to set its radius in pixels. When the "Link all corners" option is checked, moving any slider will update all four corners simultaneously. Uncheck it to control each corner independently. Use the preset buttons for common shapes like circles, pills, rounded rectangles, or sharp squares.
A circle requires equal width and height on the element with a border-radius of 50%. The pill shape uses a very large border-radius value that exceeds the element height, creating fully rounded ends on a rectangular shape. These patterns are popular for avatars, buttons, tags, and badges in modern UI design.
The border-radius property is supported in all modern browsers with no vendor prefixes needed. It has excellent performance and does not impact page rendering speed. You can safely use complex border-radius values including the shorthand notation that specifies different values for each corner, exactly as our generator outputs.