Border Radius

Preview

Float Preview

CSS Code

width: 200px;
height: 200px;
background-color: #3b82f6;
border-radius: 8px;

Customize

Dimensions

Width

Height

Style

Background Color

Border Width

Border Color

Top Left

Top Right

Bottom Right

Bottom Left

About Border Radius Generator

A versatile tool for creating custom rounded corners in CSS. This generator helps you visualize and create border radius styles with different values for each corner, perfect for designing modern UI elements with precise control over corner roundness.

How to Use Border Radius Generator

Adjust individual corner radii using the sliders (Top Left, Top Right, Bottom Right, Bottom Left)
Customize the preview box dimensions (width and height)
Change the background color to match your design
Add and style borders with custom width and color
Preview your changes in real-time
Copy the generated CSS code with one click
Use the reset button to return to default values
Toggle the floating preview for better visibility while editing