Border Radius Generator
Generate CSS border-radius with visual controls.
Generate CSS border-radius with visual controls.
How to use Border Radius Generator
- 1
Drag the corner handles on the preview to round each corner, or enable linked mode to move all four together.
- 2
Switch between pixel units for fixed rounding and percentage units for size-relative rounding.
- 3
Enable the elliptical (slash) option when you want different horizontal and vertical radii per corner.
- 4
Watch the sample shape update live so you can dial in pills, circles, or asymmetric blobs.
- 5
Click 'Copy CSS' to grab the complete border-radius shorthand for your stylesheet.
Real examples of Border Radius Generator in action
All corners, ~9999px
border-radius: 9999px;
Round 3 corners, leave bottom-left sharp
border-radius: 12px 12px 12px 0;
Elliptical slash syntax, mixed corners
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
Who is Border Radius Generator for?
Frontend developers shaping buttons, cards, and avatars with precise rounding
UI designers prototyping pills, bubbles, and blobs without writing CSS first
Design system maintainers standardizing and exporting corner-radius tokens
Beginners learning the clockwise corner order and the percentage-versus-pixel difference
Why use Border Radius Generator?
- Independent four-corner control with the corners output in the correct clockwise shorthand order.
- Pixel and percentage units let you choose fixed rounding or rounding that scales with the element.
- Elliptical slash mode produces organic blob and speech-bubble shapes that are tedious to write by hand.
- Linked mode gives quick uniform rounding for buttons and cards in a single drag.
- Live preview plus clean, prefix-free CSS output, all running offline with no account needed.
Common use cases
- Create pill-shaped buttons using a large pixel radius that stays a half-capsule at any width.
- Round just three corners to build a chat speech-bubble shape with one square tail corner.
- Use the slash syntax to design soft, asymmetric blob backgrounds for a landing page.
- Match card corners to a design system's radius token and copy the exact value into your stylesheet.
How Border Radius Generator compares to alternatives
Honest comparison to other popular options — pick the right tool for the job.
| Tool | Main limitation |
|---|---|
| RapidTables / generic CSS rounding pages | Usually one uniform radius only, with no per-corner or elliptical slash control |
| Fancy Border Radius / blob-only generators | Focus on blob shapes and skip simple fixed-pixel pill and card workflows |
| Figma corner radius | Excellent for design but does not export the CSS border-radius shorthand directly |
| Border Radius Generator | Free, runs in your browser, no sign-up, no watermarks, no file-size limits beyond your device memory. |
Limitations & things to know
- The preview uses a sample shape, so extreme percentage radii may look different on your real element's aspect ratio
- Per-corner elliptical (slash) output is correct CSS but can be hard to fine-tune by eye for complex blobs
About Border Radius Generator
A border radius generator is a visual tool that builds the CSS border-radius property, which controls how rounded the corners of an element are. Xevon Tools' Border Radius Generator lets you drag handles for all four corners independently or link them for a uniform radius, switch between pixel and percentage units, and enable the elliptical slash syntax for organic shapes, all over a live preview. The shorthand reads clockwise from the top-left corner: border-radius: 10px 20px 30px 0 sets the top-left, top-right, bottom-right, and bottom-left in that order. There are two important behaviors worth knowing. First, percentage radii are relative to the element's own width and height, so 50% on a square turns it into a perfect circle, while 50% on a rectangle produces an ellipse rather than a pill. To make a true pill button you instead use a large pixel value or 9999px, which clamps to a half-capsule regardless of size. Second, the slash syntax such as border-radius: 100px / 50px sets the horizontal radius before the slash and the vertical radius after it, letting each corner be elliptical rather than circular, which is the basis for soft blob shapes. If the sum of two adjacent corner radii exceeds the side length, the browser proportionally scales them down so the shape stays valid, so very large values simply round as much as the box allows. The generated shorthand is standards-compliant, needs no vendor prefixes, and the tool runs entirely in your browser.
Frequently asked questions
Your files never leave your device
Every tool on Xevon Tools runs 100% in your browser. No uploads, no servers, no tracking. Free forever.
Embed Border Radius Generator on your site
Add this tool to your own website, blog, or internal tool page with one line of code. Free to use, no attribution required (but appreciated).
<iframe src="https://www.xevontools.com/embed/border-radius-generator" width="100%" height="640" style="border:1px solid #e2e8f0;border-radius:12px;" title="Border Radius Generator — Xevon Tools"></iframe>