Skip to content
epitometool

CSS border-radius generator

CSS & UI generators

Create custom rounded corners visually and copy exact border-radius CSS shorthand.

Updated

Corner controls

Adjust each corner independently.

Preview and CSS

border-radius: 16px 16px 16px 16px;

Quick start

How to build border-radius CSS

Move each corner slider and copy the shorthand value.

  1. Step 1
    Set corner values

    Adjust top-left, top-right, bottom-right and bottom-left independently.

  2. Step 2
    Inspect shape

    Use the live preview to verify your card or button silhouette.

  3. Step 3
    Copy output

    Paste the generated border-radius shorthand into your CSS.

In-depth guide

CSS border-radius generator

Create custom rounded corners visually and copy exact CSS values instantly.

Value order

The four-value shorthand is top-left, top-right, bottom-right, bottom-left.

How to use it

  1. Drag each corner slider to set its radius, or enter exact pixel/percent values.
  2. Switch to elliptical mode to give a corner different horizontal and vertical radii (the / syntax).
  3. Watch the live preview and copy the generated border-radius value into your CSS.

Percentages are relative to the box size, which is handy for pill buttons (border-radius: 9999px) and circles (50% on a square).

Pitfalls and privacy

A radius larger than half the shorter side simply clamps to a full curve, so very large pixel values look identical — use a percentage if you want it to stay round as the box resizes. Remember the corner can be clipped by overflow: hidden children, and box-shadow follows the rounded edge. The CSS is generated locally in your browser; nothing is uploaded.

UI best practices

  • 8-16px for cards and inputs.
  • 20-32px for hero blocks.
  • Use asymmetric radii sparingly to avoid visual noise.

When to use it vs alternatives

Use this tool for quick browser-based work when you need an answer or output immediately. Use a dedicated application or automated workflow when you need bulk processing, approvals, or repeatable production rules.

Frequently asked questions

Can I control corners separately?

Yes. Each corner has its own slider and updates in real time.

Does this support percentages?

Current output is pixel-based for predictable UI design. Percentage mode can be added in a later sprint.

Is any data uploaded?

No. All calculations run locally in your browser.

How do I make a perfect circle?

Apply border-radius: 50% to a square element. For a pill-shaped button, use a very large value like 9999px.

Why does my rounded corner look cut off?

A child element or image can spill past the radius. Add overflow: hidden to the rounded element to clip its contents to the curve.

What are elliptical corners?

Each corner can have separate horizontal and vertical radii using the slash syntax, for example border-radius: 40px / 20px, producing an oval rather than a quarter-circle.

Keep exploring

More tools you'll like

Hand-picked utilities that pair well with the one you're on — all free, client-side, and zero-signup.

More css & ui generators

See all →

Popular across EpitomeTool

Browse all →
Browse all 212+ free tools