The tool maps the slider values to the `border-radius` CSS property. When you control the corners individually, it uses the long-form syntax (`border-top-left-radius`, etc.) to give you granular control.

1. Use the 'All Corners' slider for a uniform radius.
2. Uncheck 'Link all corners' to control each corner individually.
3. Switch between `px` and `%` units for different effects.
4. Watch the live preview update as you adjust the sliders.
5. Copy the generated CSS code with one click.

• Designing modern, friendly-looking cards and containers.
• Creating pill-shaped buttons and tags.
• Building organic, 'blob'-like shapes for visual interest.

• Individual Corner Control: Fine-tune each corner separately.
• Uniform Radius Option: Link all corners for quick, uniform rounding.
• Pixel & Percent Units: Switch between absolute and relative units.
• Real-Time Visual Preview: See your shape come to life instantly.
• Instant Code: Get clean, production-ready CSS.

The `border-radius` property in CSS can accept one, two, three, or four values to control the rounding of the top-left, top-right, bottom-right, and bottom-left corners respectively. This tool provides a visual interface for that control.

All calculations and data processing for this tool are performed locally in your browser. We do not send any of your data to our servers, ensuring your information remains private and secure.