CSS Border Radius Generator — Visual Rounded Corner Builder

Your CSS

Try:

About the CSS Border Radius Generator

Rounded corners soften a design and make buttons, cards, avatars, and inputs feel friendlier. This visual builder lets you shape all four corners with sliders instead of guessing numbers — link every corner for a uniform look, unlink them to round each one independently, and switch on oval corners for the wide, organic curves that give “blob” and “squircle” shapes their character. The exact border-radius line updates as you drag, ready to copy straight into your CSS.

Keep corners linked for a consistent radius across a whole set of cards or buttons.

Switch to percent and set every corner to 50% to turn a square into a perfect circle.

Use a very large pixel radius for pill-shaped buttons and tags.

Turn on oval corners to create soft, asymmetric “blob” backgrounds and highlights.

How it works

Three steps. No sign-up, no upload, no wait.

Drag the sliders

Round each corner to taste — or keep them linked to shape all four at once.

Watch it live

The preview box updates instantly so you can see exactly how the corners look.

Copy the CSS

Grab the ready-to-paste border-radius line and drop it straight into your stylesheet.

🔒

Private by design.Everything happens right here in your browser. Your files are never uploaded — we never see them.

Frequently Asked Questions

What does the border-radius value mean? ▼

It sets how rounded a box's corners are. One value rounds all four corners equally — border-radius: 16px; — while four values set each corner in turn: top-left, top-right, bottom-right, bottom-left. This builder writes that line for you.

How do I round just one corner? ▼

Turn off “Link all corners”, then drag only the corner you want. The tool switches to the four-value form automatically, for example border-radius: 24px 0 0 0; to round only the top-left corner.

What is the slash (/) in the CSS for? ▼

The slash creates oval (elliptical) corners. Values before the slash are the horizontal radii and values after it are the vertical radii — border-radius: 40px / 20px; makes wide, shallow curves. Turn on “Different horizontal & vertical” to build these.

Should I use pixels or percent? ▼

Use px for a fixed, consistent curve at any size. Use % when you want the rounding to scale with the box — border-radius: 50%; turns a square into a perfect circle and a rectangle into a pill or ellipse.

How do I make a perfect circle or a pill shape? ▼

Switch units to percent and set every corner to 50% — a square becomes a circle. For a pill or capsule button, keep pixels and use a large radius like border-radius: 999px;, which rounds the short ends fully.

Is anything uploaded or saved? ▼

No. The preview and CSS are generated entirely in your browser — nothing is sent anywhere and nothing is stored.