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
Use the slider to set the border radius. By default, all corners are linked.
Click "Individual" to control each corner separately.
Switch between px and % units.
Try a preset shape: Rounded, Pill, Blob, Circle, or Ticket.
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 set each individually for asymmetric shapes. Switch between pixel and percentage units, and use built-in presets for common shapes. The live preview shows exactly how your element will look.
Frequently Asked Questions
Pixels give a fixed radius regardless of element size. Percentages scale with the element — 50% on a square creates a perfect circle.
Set border-radius to 50%. The element must also be a square (equal width and height) for a perfect circle.
Share This Tool
Related Tools
Password Generator
Generate cryptographically strong passwords with custom length, character sets, and strength analysis
Random Number Generator
Generate truly random numbers within any custom range with optional decimal precision and bulk generation
UUID Generator
Generate universally unique identifiers (UUID v4) for databases, APIs, and distributed systems
QR Code Generator
Create customizable QR codes for URLs, text, WiFi, email, and phone with color and size options
Barcode Generator
Generate industry-standard barcodes in CODE128, EAN-13, UPC-A, and other formats for print or digital use
Hash Generator
Generate secure hash values using MD5, SHA-1, SHA-256, and SHA-512 algorithms for data integrity