Border Radius Generator

Generate CSS border-radius with live preview. Link or unlink corners for individual control.

Corner Radius

Top Left16px

Top Right16px

Bottom Right16px

Bottom Left16px

Box Style

Size: 200px

Background

Border Color

Border: 2px

CSS Output

border-radius: 16px;
border: 2px solid #2563eb;

Quick Values

About Border Radius Generator

Border Radius Generator gives you individual sliders for each corner of a box (top-left, top-right, bottom-right, bottom-left) with a live preview shape that updates as you drag. It generates both the shorthand border-radius CSS and the individual corner longhand properties.

Creating asymmetric border radius shapes — like a teardrop, wave, or organic blob-like rectangle — requires carefully tuning each corner. This tool makes that visual and immediate.

Great for designing pill buttons, custom card shapes, and decorative elements.

Features

✓Individual control per corner
✓Live shape preview
✓Shorthand and longhand CSS output
✓Supports percentage and pixel values
✓Symmetry lock option

Common Use Cases

→Designing rounded button shapes
→Creating organic card and panel shapes
→Building decorative divider shapes
→Generating asymmetric blob-like CSS shapes