Skip to main content

CSS Border Radius Generator

A free online tool to visually create CSS border-radius and copy the code.

Preview

Mode

Radius

px

CSS Code

border-radius: 20px;

Presets

Key Features​

  • 2 Modes: All mode, Individual corners mode
  • Real-time Preview: See changes instantly
  • Fine Control: 0-200px range
  • 9 Presets: Common rounded styles
  • One-Click Copy: Copy CSS code instantly

What is Border Radius?​

border-radius is a CSS property that rounds the corners of elements.

Basic Syntax​

/* All corners equal */
border-radius: 10px;

/* Individual corners */
border-radius: 10px 20px 30px 40px;
/* Order: top-left, top-right, bottom-right, bottom-left */

Preset Styles​

Square​

border-radius: 0px;

Sharp corners, classic design

Slightly Rounded​

border-radius: 4px;

Subtle roundness, refined feel

Rounded​

border-radius: 8px;

Moderate roundness, most versatile

Very Rounded​

border-radius: 16px;

Soft feel, friendly design

Pill​

border-radius: 50px;

Perfect for buttons and tags

Circle​

border-radius: 9999px; /* or 50% */

Profile images, icons

Top Only​

border-radius: 12px 12px 0 0;

Modal headers, card tops

Bottom Only​

border-radius: 0 0 12px 12px;

Modal footers, dropdowns

Blob​

border-radius: 30px 60px 30px 60px;

Organic shapes, unique design

Browser Compatibility​

  • ✅ Chrome 5+
  • ✅ Firefox 4+
  • ✅ Safari 5+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ All mobile browsers