Free CSS Border Radius Generator

The CSS border-radius property is the foundational tool for creating soft, friendly user interfaces. While rounding the four corners of a button is easy, trying to hand-code organic, asymmetrical "blob" shapes requires complex 8-value syntax that is notoriously difficult to visualize. Our free CSS Border Radius Generator lets you visually mold elements in real-time and instantly copy the precise cross-browser code.

How to Use the Generator

1. Choose Your Unit: Select between Pixels (px) for exact, fixed corner rounding, or Percentages (%) for dynamic shapes that scale with their container.
2. Link or Unlink Corners: By default, the "🔗 Link All" box is checked. Moving one slider will perfectly sync all four corners for a uniform shape. Uncheck this box to adjust the Top-Left, Top-Right, Bottom-Right, and Bottom-Left corners independently.
3. Advanced Blob Mode (8 Values): Check the "Enable Advanced" box to unlock the vertical radii sliders. By applying different horizontal and vertical radii to the exact same corner, you can stretch the curve to create completely unique, asymmetrical organic shapes.
4. Copy Your Code: Watch the live preview box update instantly as you move the sliders. When you have achieved the perfect shape, click the blue "Copy CSS" button to grab the standard rule alongside legacy webkit and moz fallbacks.

Pro CSS Formatting Tips

• Perfect Circles: To create a perfect circle from a square element, set your measurement unit to Percentages (%) and move all four sliders to exactly 50%.
• Pill Buttons: To create a perfectly rounded "pill" button (capsule shape), use Pixels (px) and set the radius higher than the total height of the button (e.g., 999px).
• The Slash Syntax: If you use the Advanced Mode, you will see a slash (/) in the generated CSS. The numbers before the slash represent the horizontal radius, and the numbers after the slash represent the vertical radius.