Border Radius Generator
Shape four corners independently, link them together and copy the CSS border-radius rule.
100% private — everything runs in your browser
How to Use
- 1
Type a radius for each corner, or switch on Link all corners.
- 2
Pick a preset, or paste an existing border-radius value to edit it.
- 3
Copy the generated CSS and drop it into your stylesheet.
Examples
Rounded card
Input
16 px on all cornersOutput
border-radius: 16px;Top-only rounding
Input
16px 16px 0 0Output
border-radius: 16px 16px 0 0;FAQ
How do I make a circle?
Use a square element and set every corner to 50% — the Circle preset does it for you.
Can the corners have different shapes?
Yes. Each corner accepts its own value, including elliptical pairs such as 40% 20%.
What is the maximum radius?
Any length works; browsers clamp values above half of the box size.
Related Tools
CSS Box Shadow GeneratorDesign a CSS box-shadow with live sliders, presets and a preview, then copy the ready-to-paste rule.Gradient GeneratorCreate CSS linear and radial gradients visually and copy the CSS code.CSS Color GeneratorTurn a base color into a 10-step shade scale and export it as CSS variables.JSON FormatterFormat, beautify, minify and validate JSON instantly — right in your browser.JSON ValidatorValidate JSON instantly and find syntax errors with the exact line, column and position — right in your browser.Base64 Encoder/DecoderEncode text to Base64 and decode Base64 back to text with full Unicode and emoji support — 100% in your browser.