Border Radius Generator

Tune all four corners with live preview, then copy clean CSS — uniform radius or per-corner control for cards, buttons and avatars.

Adjust corner radii

CSS

border-radius: 16px;

When do you need a border-radius generator?

What this tool does

This border-radius generator lets you tune all four corners with live preview, per-corner sliders, and unit switching between px, %, and rem. Link corners for uniform rounding or unlink for asymmetric shapes like speech bubbles and tab interfaces. Copy clean CSS with one click.

Why you need it

Rounded corners define modern UI — cards, buttons, avatars, modals, and image crops all rely on border-radius. The shorthand syntax packs up to four values in clockwise order, which is easy to transpose. A visual editor shows exactly how each corner curves before you commit values to your codebase.

Percentage units behave differently from pixels — 50% on a square creates a circle, while on a rectangle you get an ellipse. This tool makes those relationships tangible without mental math.

Rounded corners also carry brand meaning: sharp squares read as technical or serious, gently rounded rectangles feel friendly and approachable, and fully pill-shaped controls signal a tappable action. Design systems often codify two or three radius tokens (small, medium, large) rather than letting every component pick its own value — this tool is a fast way to test candidate values before they become tokens.

How to use it

  1. Drag the corner sliders (or keep Link corners on for uniform radius).
  2. Pick px, % or rem as the unit depending on your layout needs.
  3. Watch the preview update live as values change.
  4. Copy the CSS into your stylesheet or component.

Practical examples

  • Card component: 12px uniform radius on a white card with box shadow for a standard elevated panel.
  • Avatar circle: 50% radius on a 48×48px square image for a perfectly round profile photo.
  • Asymmetric tab: Top-left and top-right at 8px, bottom corners at 0 for a folder-tab shape.
  • Pill button: 9999px or 50% on a short, wide button for fully rounded ends.
  • Chat bubble: Three corners at 16px and one corner near 4px to mimic a speech-bubble tail without an extra pseudo-element.

How it works

CSS border-radius accepts one to four values following the top-left → top-right → bottom-right → bottom-left clockwise pattern. Omitted values mirror their opposite corner. Percentages resolve relative to the element's width and height — so 50% horizontal and 50% vertical on a square yields a circle.

The preview box applies your declaration in real time. Linked mode syncs all four sliders; unlinked mode lets each corner vary independently. Output uses the most compact valid shorthand the tool can produce.

Each corner can technically take two values — horizontal and vertical radius — separated by a slash, which produces elliptical rather than circular curves. This tool focuses on the common single-radius-per-corner case that covers the vast majority of UI work; the two-value slash syntax is mainly useful for stylized illustrative shapes rather than standard components.

Common mistakes

  • Expecting a circle on non-square elements: 50% on a 200×100px box produces an ellipse, not a circle — match width and height first.
  • Wrong corner order: CSS goes clockwise from top-left, not top-to-bottom — verify asymmetric values in the preview.
  • Mixing units carelessly: Combining px and % in one declaration is valid but hard to maintain — pick one unit per component.
  • Forgetting overflow hidden: Rounded corners on containers clip child content only when overflow: hidden is set on the parent.
  • Inconsistent radius tokens: Using a different one-off value on every card or button makes a UI feel unplanned — pick two or three radii and reuse them everywhere.

FAQ

What is the CSS order for four corners?

border-radius uses top-left, top-right, bottom-right, bottom-left — clockwise from the top-left corner.

When should I use one value vs four?

One value rounds all corners equally. Use four when each corner needs a different radius.

Does this work with percentages?

Yes. Switch the unit to % for elliptical or fully circular shapes relative to the element size.

How do I make a perfect circle?

Use 50% on a square element, or half the width/height in px. Equal width and height are required for a true circle.

What does Link corners do?

When linked, moving one slider updates all four corners to the same value. Unlink to set asymmetric radii per corner.

Related tools