Border Radius Generator — online
Generate CSS border-radius visually.
How to use Border Radius Generator
Open the Border Radius Generator interface
Navigate to the tool and locate the square preview box in the center of the screen. You'll see four corner radius sliders labeled 'Top Left', 'Top Right', 'Bottom Right', and 'Bottom Left' on the right panel.
Adjust corner radius values using sliders or input fields
Drag any of the four corner sliders left to right (0-100px range) or type exact pixel values directly into the input fields. Watch the preview box update in real-time as you modify each corner independently.
Toggle between uniform and individual corner controls
Click the 'Uniform' toggle button to apply the same radius to all four corners at once, or leave it unchecked to customize each corner separately for asymmetrical designs.
Preview the CSS code output
View the generated CSS code in the code panel below the preview. The code automatically updates and displays the border-radius property with your custom values in standard CSS format.
Copy the CSS code to your clipboard
Click the 'Copy Code' button located beneath the CSS output panel. A confirmation message will appear confirming the code has been copied and is ready to paste into your stylesheet.