Border Radius Generator — design CSS rounded corners visually | GetAnythingPro

Border Radius Generator

A border radius generator takes the fiddling out of rounded corners. Writing border-radius: 12px 24px 12px 24px / 18px 30px 18px 30px by hand — and remembering which value controls which corner — is the kind of CSS trivia nobody should have to memorize. One wrong number and your sleek card turns into a lopsided blob, and you are back in the browser inspector nudging values.

This free border radius generator gives you sliders for every corner, a link-all-corners mode for uniform rounding, and an elliptical mode for separate horizontal and vertical radii. Watch the preview update live, then copy the optimized border-radius shorthand. No signup, no watermarks, everything in your browser.

🔒 100% private — everything runs in your browser, nothing is uploaded.

How to Use the Border Radius Generator

  1. Drag the corner sliders — each slider rounds one corner of the preview box. With “Link all corners” checked (the default), one slider controls all four for uniform rounding.
  2. Unlink for asymmetric corners — uncheck the link box to set each corner independently. Try rounding only the top corners for a classic card-header look.
  3. Enable elliptical mode — check “Elliptical corners” to control horizontal and vertical radii separately, unlocking squircle and pill variations.
  4. Watch the live preview — the blue box updates instantly, showing exactly how your element will look.
  5. Copy the CSS — click “Copy CSS” to grab the optimized border-radius shorthand and paste it into your stylesheet.

Features That Set This Tool Apart

  • Four independent corners — round each corner separately for asymmetric designs, or link them for consistency.
  • Elliptical mode — separate horizontal and vertical radii per corner, the full power of the slash syntax without memorizing it.
  • Smart shorthand output — the tool compresses 20px 20px 20px 20px to 20px automatically, so your CSS stays clean.
  • Live preview — what you see is exactly what your CSS produces, at any slider position.
  • Private by design — a border radius generator has no business uploading anything. Everything runs locally in your browser.

Understanding the Border-Radius Shorthand

The border-radius shorthand accepts one to four values, applied in clockwise order starting at the top-left corner: top-left, top-right, bottom-right, bottom-left. With one value, all corners match. With two values, the first covers top-left and bottom-right while the second covers top-right and bottom-left. Three values set top-left, then top-right and bottom-left as a pair, then bottom-right. Four values address each corner individually.

This mirroring rule trips people up, so here is a concrete example: border-radius: 8px 24px rounds the top-left and bottom-right corners by 8px and the other two by 24px, producing a pleasing diagonal rhythm designers call a “squircle-ish” or leaf shape. The generator above writes the shortest correct shorthand for whatever you dial in, so you never have to count positions yourself.

Percentages work too and are relative to the element’s dimensions: border-radius: 50% on a square makes a perfect circle, while on a rectangle it makes an ellipse. Percentages are handy for avatars and pills because they adapt when the element resizes. The catch is that percentage radii on very different width and height can look stretched, which is where the elliptical slash syntax comes in.

One more detail worth knowing: browsers clamp radii that would overlap. If you set each corner of a 100px-wide box to 80px, the browser proportionally reduces them so the curves meet cleanly instead of overlapping. You will never get broken rendering from oversized radii — just rounder corners than you asked for.

Elliptical Corners: The Slash Syntax

Every corner actually has two radii — horizontal and vertical — and the slash syntax lets you set them independently: border-radius: 40px 20px 40px 20px / 20px 40px 20px 40px. Values before the slash are horizontal radii (in the same four-corner order); values after are vertical radii. When you omit the slash, horizontal and vertical are equal and you get circular corners.

Elliptical corners shine in a few specific designs. Pills and stadium shapes use a huge horizontal radius with a matching vertical one — border-radius: 999px is the popular trick, which the browser clamps into a perfect capsule. Squircle-like corners (the iOS app-icon look) use a larger horizontal radius than vertical on each corner for that smooth, continuous curve.

Asymmetric elliptical corners create genuinely distinctive shapes: rounding only the top-left corner elliptically (border-radius: 60px 0 0 0 / 30px 0 0 0) gives cards and banners a designer-y flourish that circular corners cannot match. The elliptical mode in this border radius generator exposes all eight values with sliders, so you can explore these shapes visually instead of doing geometry in your head.

A practical tip: keep elliptical ratios modest (roughly 2:1 at most) unless you are deliberately going for an avant-garde look. Extreme ratios quickly look like rendering bugs rather than design choices.

Border Radius in Real Designs

Border radius is one of the strongest signals of a design’s personality. Sharp 0–2px corners feel technical and precise — think developer tools and financial dashboards. Moderate 6–12px rounding feels friendly and modern, the default for most SaaS cards and buttons today. Large 16–32px radii feel playful and approachable, common in consumer apps and marketing sites.

Consistency matters more than the exact number. Pick a radius scale — for example 4px for small elements, 8px for cards, 16px for modals, 999px for pills — and stick to it across your interface. A design system with five different card radii looks accidental; one with a deliberate scale looks professional. Document your scale next to your color palette and spacing tokens.

Radius should also nest correctly. When a rounded card contains a rounded image or header, the inner radius should be slightly smaller than the outer one (roughly outer radius minus the padding). If both use 12px, the inner corners look pinched; inner 8px inside outer 12px with 8px padding looks optically correct.

For the authoritative reference, see the MDN documentation on border-radius, which covers the full shorthand, percentages, and the slash syntax with interactive examples. And if you are rounding images specifically, remember that border-radius clips the image only when paired with overflow: hidden on a wrapper — or apply the radius directly to the img itself.

Border Radius Generator: Frequently Asked Questions

What is a border radius generator?

A border radius generator is a visual tool for designing CSS rounded corners without writing code by hand. You drag sliders for each corner while watching a live preview, optionally enable elliptical mode for separate horizontal and vertical radii, and then copy the optimized border-radius shorthand into your stylesheet. It eliminates the guesswork of remembering the four-value order and the slash syntax for elliptical corners.

How does the border-radius shorthand work?

The shorthand takes one to four values in clockwise order: top-left, top-right, bottom-right, bottom-left. One value rounds all corners equally. Two values set the top-left and bottom-right pair, then the top-right and bottom-left pair. Three values set top-left, the diagonal pair, then bottom-right. Four values address each corner individually. The generator above always outputs the shortest valid form of whatever you design.

What are elliptical corners in CSS?

Elliptical corners have different horizontal and vertical radii, written with a slash: border-radius: 40px 20px / 30px 15px. Values before the slash are the horizontal radii for each corner, values after are the vertical radii. This creates egg-like or squircle-like curves instead of circular arcs. Enable elliptical mode in the border radius generator to control all eight values with sliders and preview the result live.

How do I make a perfect circle with border-radius?

Set border-radius to 50 percent on a square element, for example width: 120px; height: 120px; border-radius: 50%. The percentage is relative to the element’s dimensions, so a square becomes a circle and a rectangle becomes an ellipse. For pill or capsule shapes on buttons, use a very large pixel value like border-radius: 999px, which the browser clamps into a perfect stadium shape regardless of the element’s size.

Why do my rounded corners look pixelated or jagged?

Jagged corners usually come from scaling: a small-radius element enlarged via transform, or a low-resolution background image with baked-in corners. Pure CSS border-radius is rendered as a vector curve and stays crisp at any size. If corners look rough, make sure the radius is applied to the element itself rather than a stretched background image, and avoid tiny radii like 1px on high-DPI screens where they can shimmer.

Rounded corners seem trivial until you need eight of them to behave. This border radius generator handles the shorthand, the slash syntax, and the shorthand compression for you — drag, preview, copy, done.