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;
}
Ad Placeholder

header horizontal Unit

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.

Ad Placeholder

below tool horizontal Unit