CSS Border Radius Generator

Visually craft border-radius values (single or individual corners), preview live, and copy production-ready CSS for your project.

Controls

Top-left (px)

Top-right (px)

Bottom-right (px)

Bottom-left (px)

CSS Output

Copy the declaration below into your stylesheet.

border-radius: 16px 16px 16px 16px;
/* Example */
.preview-box {
  border-radius: 16px 16px 16px 16px;
}

Preview

border-radius

16px 16px 16px 16px

CSS: border-radius: 16px 16px 16px 16px;

How to Use the Border Radius Generator

Choose whether you want a uniform radius (same on all corners) or individual corners.
Use the sliders or numeric inputs to set values (measured in pixels).
Watch the preview box update live to see how the radii look at different sizes.
Click Copy CSS to copy the CSS declaration to your clipboard.
Paste into your stylesheet or component style. Example: border-radius: 10px 20px 30px 40px;

💡 Pro Tip: Use low values (4–12px) for subtle rounding on UI controls, larger values (40–999px) for pills or fully-rounded shapes.

What is this tool?

The Border Radius Generator is a small utility that helps you visually create and fine-tune CSS border-radius values. It supports both uniform and per-corner radii and gives you a ready-to-copy CSS declaration.

Why use our tool?

Speed: Quickly experiment with radii and get instant CSS you can drop into your project.
Accuracy: Avoid guesswork — see exact px values and copy them directly.
Responsive preview: See how radii behave on multiple sizes so your design remains consistent.