Border Radius Generator

Craft custom CSS border-radius values with a visual drag editor and instant code generation

border-radius: 12px;

How to Use This Tool

1

Use the slider to set the border radius. By default, all corners are linked.

2

Click "Individual" to control each corner separately.

3

Switch between px and % units. Try a preset: Rounded, Pill, Blob, Circle, or Ticket.

4

Copy the generated CSS code with one click.

About This Tool

Border Radius Generator is a visual CSS border-radius builder. Control all four corners together or individually for asymmetric shapes. Switch between pixel and percentage units, and use presets for common shapes. The live preview shows exactly how your element will look. Use 50% on a square element for a perfect circle.

Share This Tool

Twitter

Related Tools

Back to Generators