CSS Border Radius Generator
Visually craft border-radius values (single or individual corners), preview live, and copy production-ready CSS for your project.
Controls
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
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.
🚀 Explore More Free Developer Tools
Don’t stop here! Supercharge your workflow with our other powerful converters & formatters.
🎨 CSS Loaders Generator
Generate CSS loaders and spinners
🔧 Hash Generator
Generate hashes (MD5, SHA-1, SHA-256, etc.) from input
🎨 CSS Backgrount Patterns Generator
CSS Backgrount Patterns Generator
💡 New tools are added regularly — bookmark DevUtilsX and stay ahead!
Want to support my work?
Buy me a coffee