Free CSS Border-Radius Generator — Create Rounded Corners
Generate CSS border-radius values with individual corner control, pixel/percent units, and live preview on sample shapes. Runs entirely in your browser.
How to Use the Border-Radius Generator
- Linked mode — toggle "All corners same value" to set all four corners at once.
- Individual mode — disable linked mode to control each corner independently.
- Units — choose between pixels (px) or percentage (%) units.
- Quick shapes — click preset shapes like Circle, Pill, Leaf, or Blob for instant results.
- Preview — see the radius applied to squares, rectangles, cards, buttons, and avatars.
- Copy CSS — grab the CSS or Tailwind classes with one click.
Why Use This Border-Radius Generator
Border-radius is one of the most used CSS properties for creating modern, friendly interfaces. Getting the exact radius right — especially for asymmetric shapes like leaves or blobs — requires visual experimentation. This tool makes it easy to find the perfect radius by showing live previews on multiple element types.
The individual corner control enables creative shapes that would otherwise require manual calculation. The Tailwind output integration makes it seamless to work with utility-first CSS frameworks.
Frequently Asked Questions
Pixels (px) create fixed-radius corners regardless of element size — good for consistent shapes. Percentage (%) creates proportional radius based on element dimensions — perfect for making circles (50%) or responsive shapes that scale with the element.
Set border-radius to 50% on a square element (equal width and height). Or use the "Circle" quick shape button which automatically sets the appropriate values. The element must have equal width and height to appear as a perfect circle.
CSS border-radius actually supports 8 values for complex shapes: the first 4 define the outer radii (top-left, top-right, bottom-right, bottom-left), and the next 4 define the inner radii for each corner. This tool supports all 8 values for maximum creative control.
Use Cases
Pill-Shaped Buttons
Design pill-shaped buttons with fully rounded corners for modern, friendly user interface components.
Card Layouts
Create card layouts with rounded corners for content display, product cards, and dashboard widgets in web design.
iOS/Android Design
Match the design language of iOS and Android platforms by generating border-radius values that follow their guidelines.
Marketing Emails
Generate CSS for marketing emails with consistent border-radius values that render correctly across email clients.
UI Component Prototyping
Prototype UI components quickly by experimenting with different border-radius values and seeing live previews on shapes.