CSS Border Radius Generator

100% free · Runs 100% in your browser · No signup needed

Preview

Link all corners

Unit: px %

Top-left20px

Top-right20px

Bottom-right20px

Bottom-left20px

border-radius: 20px;

Di CSS Border Radius Generator

What is the CSS Border Radius Generator?

The CSS Border Radius Generator is a free online tool that creates border-radius CSS for rounded corners without memorizing syntax. Rounded corners soften buttons, cards, avatars and images, and they are a staple of modern web design. Writing the values by hand means juggling up to eight numbers for elliptical corners, which is tedious and easy to get wrong.

This tool gives you a visual box with sliders for each corner: top-left, top-right, bottom-right and bottom-left. Drag, watch the live preview update, and copy the clean CSS output. You can create uniform rounding, pill shapes, or quirky asymmetric corners in seconds, all free in your browser.

How to Use the CSS Border Radius Generator

Adjust the corners: Move the four sliders to set each corner radius in pixels or percent.
Try link mode: Lock all corners together for uniform rounding with a single slider.
Preview live: Watch the box update instantly, including your chosen background color.
Copy the CSS: Grab the generated border-radius declaration from the code box.
Paste into your stylesheet: Apply it to buttons, cards, images or any element.

Key Benefits

Visual design: See exactly what your corners will look like before copying code.
Per-corner control: Set each corner independently for custom shapes.
Clean output: Compact, valid CSS that works in all modern browsers.
Pixel and percent: Use px for fixed rounding or % for fluid, responsive shapes.
Free with no signup: Generate unlimited radius sets right in your browser.

Pro Tips

50% makes circles: Apply 50% radius to a square element for a perfect circle avatar.
Pill buttons: Use a large pixel radius like 999px on buttons for the trendy pill shape.
Match your design system: Pick 2-3 standard radii (for example 4px, 8px, 16px) and reuse them for consistency.
Test with real content: Large radii can clip text or images, so preview with actual content inside.

Frequently Asked Questions

What does border-radius do?

It rounds the corners of an element. Higher values mean rounder corners, and 50% on a square creates a circle.

Can I set different radii per corner?

Yes. The tool supports independent values for all four corners, including elliptical shapes with two values per corner.

Will the CSS work in all browsers?

Yes. Border-radius is supported by every modern browser without prefixes.

What is the difference between px and % values?

Pixels give fixed rounding regardless of size, while percentages scale with the element, which is ideal for responsive designs.

Related Tools

Design gradients with the CSS Gradient Generator, shrink stylesheets using the CSS Minifier, and pick perfect shades with the Color Converter.

Polished design deserves hosting that renders it instantly. FistHost web hosting serves your styled pages from blazing-fast servers with plans from $0.99/mo and a free domain included.

User Reviews

No reviews yet. Be the first to review this tool!