About Border Radius Generator
Visually control CSS border-radius values for all four corners of an element with a live preview. Link all corners for uniform rounding or adjust each corner independently. Instantly generates the CSS border-radius declaration ready to copy into your stylesheet.
How to Use Border Radius Generator
- 1
Adjust the sliders
Drag each corner's slider or unlink them to set individual values.
- 2
Preview the shape
See the live preview square update in real time.
- 3
Copy the CSS
Click Copy to grab the border-radius declaration for your stylesheet.
Common Use Cases
- Designing card and button component border styles
- Creating circle shapes from square elements
- Experimenting with asymmetric rounded corners
- Generating CSS for blob and organic shape effects
Frequently Asked Questions
Can I set different radius for each corner?
What is the CSS shorthand format?
Related Tools
Box Shadow Generator
Design CSS box shadows with a visual editor and get the code.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor.
CSS Flexbox Generator
Visual CSS flexbox playground with live preview and code output.
CSS Formatter
Format and beautify minified CSS code with proper indentation.
JSON Formatter
Format, validate, and beautify JSON data with syntax highlighting.
Base64 Encoder/Decoder
Encode text to Base64 or decode Base64 strings back to plain text.