HomeCSS ToolsCSS Border Radius Generator

CSS Border Radius Generator

Create perfectly curved UI elements with an interactive border-radius editor. Control all 4 corners independently or link them together. Copy CSS instantly.

Presets

Corners

Unit:
12px
12px
12px
12px

Preview Size

200px
200px
Live Preview
12 12 12 12
Top Left12px
Top Right12px
Bottom Right12px
Bottom Left12px
CSS Output
.element {
  border-radius: 12px;
  width: 200px;
  height: 200px;
}

Quick Presets

Choose from Square, Pill, Card, Blob, Leaf, and more — or start from scratch with full custom control.

Link / Unlink Corners

Lock all corners together for uniform radius, or go independent for creative asymmetric design.

Color Preview

Switch preview colors instantly to see how your shapes look across different brand colors.

Need help with CSS Curves?

Learn how to master rounded corners and elliptical shapes for modern UI design with our expert guide on CSS border-radius and density mapping.

Read our Border Radius Guide