How to Create Perfectly Rounded Corners with Border Radius

Guides · Developer · Updated 2026

Rounded corners soften a design and make interfaces feel friendlier. With CSS `border-radius`, you can turn sharp rectangles into smooth buttons, circles, or pill shapes. Toolzo’s free Border Radius Generator gives you independent control over each corner, with a live preview and instant CSS. Here’s how to master rounded corners for any web project.

Why border radius is a design superpower

A small radius (4‑8px) subtly modernizes cards and input fields; a larger radius (12‑20px) makes buttons feel more approachable. When you set all four corners independently, you can create unique shapes — like a chat bubble where only the top‑left corner is sharp, or a ticket stub effect. The `border-radius` shorthand can be confusing, but the visual generator eliminates guesswork.

Transform a square image into a circle with 50% radius.
Create pill‑shaped buttons for call‑to‑actions.
Design tabs, badges, or tooltips with asymmetrical corners.

Step‑by‑step: design rounded corners

Open the Border Radius Generator tool.
Check “Link all corners” to adjust them together, or uncheck it to set each corner independently — top‑left, top‑right, bottom‑right, bottom‑left.
Drag the sliders for the desired pixel values. The live preview immediately updates.
Copy the generated CSS and apply it to your element. The code outputs the full shorthand or individual values depending on your settings.

💡 Tip: To make an element a perfect circle, ensure its width and height are equal and set all four border‑radius values to half that dimension (or simply use 50%).

Combining border radius with other effects

Rounded corners work beautifully with box shadows and gradients. For a polished card, pair a 12px radius with a subtle box shadow from our Box Shadow Generator. If you’re building a gradient background, the CSS Gradient Generator can supply the background, and the radius will clip the gradient to the rounded shape. For text inside a rounded element, you might also use the Text Shadow Generator to add depth to the heading.

Frequently Asked Questions

Can I use percentages instead of pixels?

Yes, but be careful — percentages are calculated relative to the element’s dimensions, so 50% creates an ellipse if width ≠ height. Use pixels for consistent rounding.

Does border radius work on images?

Yes, apply it directly to an `` tag or its container to round the image corners.

What’s the shorthand for four different values?

The tool outputs the full `border-radius: TL TR BR BL;` syntax, which is the easiest way to set all corners at once.

Can I animate border radius?

Absolutely — CSS transitions and animations can smoothly change the radius, creating morphing shapes.

Is the tool free to use?

Yes, it’s 100% free and runs in your browser with no account needed.

Try the Border Radius Generator