Uniform radius
Static worked example — not your live result.
Input
16px linked
Output
border-radius: 16px;
Generators
CSS Border Radius Generator
Shape rounded corners and copy the CSS. The CSS Border Radius Generator supports linked values or independent top-left, top-right, bottom-right, and bottom-left controls.
How the CSS Border Radius Generator Works
Step 1
Set Corner Radii
Link corners or edit each one.
Step 2
Generate CSS
Create the border-radius declaration.
Step 3
Copy CSS
Paste into your stylesheet.
Border Radius Features
- Linked or unlinked corners
- Live preview
- Compact or four-value CSS
- Mobile-friendly controls
- Copy CSS
Output Details
Input formats
- Options / text inputs
Output formats
- CSS
Supported formats
- CSS
Examples
Frequently Asked Questions
Can corners be independent?
Yes. Unlink corners to edit each value.
Does it output shorthand?
Equal corners collapse to one value; otherwise four values are used.
Is there a preview?
Yes. A scoped preview reflects the generated radius.
Related Design Tools
Explore related Tool Base utilities that pair well with CSS Border Radius Generator.
CSS Box Shadow Generator
New
Generate CSS box-shadow with live preview.
Generators
CSS Gradient Generator
New
Generate CSS linear and radial gradients with live preview.
Generators
Color Palette Generator
New
Generate HEX color palettes with lockable swatches.
Generators
CSS Clamp Generator
New
Generate responsive CSS clamp() expressions.
Generators
Need another utility?
Browse related tools or explore the full Tool Base directory.