Best Free CSS Border Radius Generator — I Tested 5
Photo by Pankaj Patel on Unsplash
Table of Contents
Rounded Corners Are Everywhere (and Most Devs Eyeball Them)
Here's the thing — `border-radius` isn't as simple as people think. The shorthand version takes up to eight values. You can set each corner independently. You can create elliptical corners. You can make shapes that don't look anything like a circle or a rectangle. The MDN border-radius documentation is like four pages long, and most of us have read maybe a paragraph of it.
So when I was working on a client project last month and needed some pretty specific corner shapes — pill buttons, asymmetric cards, a blob-ish hero section — I figured it was time to actually use a proper generator instead of guessing values and refreshing the browser fifty times. I tried five different tools over a weekend. Some were great. Some were barely functional. Here's what I found.
And honestly, border-radius is one of those properties where the difference between "close enough" and "exactly right" is obvious to users even if they can't articulate it. A card with 8px corners feels different from one with 12px corners. A button with pill-shaped ends (border-radius: 9999px) reads differently from one with slightly rounded corners. These details matter, and eyeballing them wastes time that a generator saves instantly.
What I Actually Tested For
**Individual corner control.** I don't want all four corners to be the same radius 90% of the time. I need sliders or inputs for top-left, top-right, bottom-right, and bottom-left separately.
**Elliptical radius support.** This is the thing most generators completely ignore. The `border-radius` property can take horizontal AND vertical radii — that's how you make organic, egg-like shapes. If a tool only gives you one value per corner, it's half a tool.
**Live preview.** I need to see the shape change as I adjust values. No "generate" button, no page reload. Real-time.
**Clean CSS output.** Give me the shorthand, give me the longhand, and don't pad it with vendor prefixes from 2014. We don't need `-webkit-border-radius` anymore. It's 2026.
**Responsiveness.** Does the tool work on my phone? I sometimes prototype while waiting for coffee. Don't judge me.
With those criteria in mind, I fired up five generators.
The 5 Generators I Tried (and How They Ranked)
Photo by Kobu Agency on Unsplash
**2. border-radius.com** — Simple and focused. Four corner sliders, real-time preview, copy-to-clipboard. It's been around for years and it does the basics well. But there's no elliptical radius option, which limits you to perfectly circular corners. Fine for quick tasks, not great for creative shapes.
**3. 9elements Fancy-Border-Radius** — This one's interesting. It gives you eight control points and creates some genuinely wild organic shapes. The interface takes a minute to figure out, and the CSS output uses the eight-value syntax that I had to look up the first time I saw it. Great for experimentation, less practical for production work where you just need consistent rounded corners.
**4. CSS Portal Border Radius Generator** — Decent UI, supports all four corners individually, has a visual preview. But the page is cluttered with ads and the copy button didn't work for me in Firefox. The output includes unnecessary vendor prefixes. It works, but it feels dated.
**5. CSSmatic Border Radius** — I've used CSSmatic's box shadow tool before and liked it. Their border radius generator is fine but minimal — just four corner sliders and a preview. No elliptical support, no advanced options. It's the bare minimum.
The ranking came down to whether the tool understood that border-radius is more than just "four corners, same value." ToolsFuel and 9elements got this right. The others treated it as a simpler property than it actually is.
I also checked whether each tool was mobile-friendly. border-radius.com and CSSmatic worked fine on my phone. 9elements was tricky to use on a small screen — too many draggable control points. ToolsFuel and CSS Portal rendered well on mobile but the drag interaction was smoother on ToolsFuel. Small detail, but it matters when you're prototyping on the go.
The Syntax Nobody Knows About
```css border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px; ```
See that forward slash? Everything before it is the horizontal radius for each corner (top-left, top-right, bottom-right, bottom-left). Everything after it is the vertical radius. When the horizontal and vertical values differ, you get an ellipse instead of a circle at that corner.
This is how designers create those smooth, organic card shapes you see on sites like Linear and Vercel's marketing pages. It's not a clip-path trick or an SVG mask — it's pure border-radius with different horizontal and vertical values.
I spent an embarrassing amount of time trying to replicate a design mockup with clip-path before my teammate pointed out it was just border-radius with the slash syntax. Don't be me. Learn the full property.
The shorthand also follows the same clockwise pattern as margin and padding — top-left, top-right, bottom-right, bottom-left. And if you only give it two values, the first applies to top-left and bottom-right, the second to top-right and bottom-left. Same diagonal-pairing logic as padding.
Here's a practical example that creates a shape like a speech bubble base:
```css .organic-card { border-radius: 24px 24px 4px 24px / 24px 24px 4px 24px; } ```
That gives you three smoothly rounded corners and one sharp bottom-right corner. Looks intentional and designed, takes one line of CSS.
When Percentage Values Beat Pixel Values
The classic example: `border-radius: 50%` turns any square into a perfect circle. You probably know that one. But did you know that `border-radius: 50%` on a rectangle creates an ellipse? The horizontal radius becomes 50% of the width, and the vertical radius becomes 50% of the height. No slash syntax needed.
Percentages are responsive by default. A card with `border-radius: 5%` keeps its proportional roundness at any size. Pixel values don't scale — `border-radius: 20px` looks great on a 400px card and weird on a 100px thumbnail.
My rule of thumb: pixels for small elements with fixed sizes (buttons, badges, input fields). Percentages for larger elements that resize (cards, hero sections, image containers). And `50%` for anything that should be a circle or ellipse.
If you're pairing border-radius with a gradient background, percentage-based radii keep the shape feeling right even when the viewport changes. I learned that the hard way after a client's landing page looked great on desktop and absurd on mobile because every rounded corner was hardcoded to 30px.
There's also a neat trick with `border-radius: 0 0 50% 50%` for creating arch shapes at the bottom of sections. Some landing pages use this to create a curved divider between sections without SVG or clip-path. It's a simpler approach and renders more consistently across browsers. I've shipped it on three client sites and it works everywhere, including older Safari versions that sometimes choke on complex clip-path values.
Performance and Overflow — the Gotchas
First, `border-radius` with `overflow: hidden` is how you clip child content to a rounded shape. Want an image to respect its card's rounded corners? Set `overflow: hidden` on the card. Without it, the image will poke out past the corners. This is the number one question I see in CSS forums and the answer is always the same.
Second, don't go crazy stacking border-radius with box-shadow and backdrop-filter on dozens of elements. Each rounded corner creates a more complex paint region for the browser. On a single card, it's nothing. On a grid of 200 items with rounded corners, box shadows, and blur effects? I've seen scroll jank on mid-range Android phones. Profile your paint times if performance matters.
And one more — `border-radius` doesn't work on `display: table` elements. If you're maintaining legacy code that uses table layouts (don't ask), you'll need a wrapper div. It also doesn't affect the layout box — it's purely visual. The element's hit area for pointer events still follows the rectangular bounding box unless you add `clip-path` or use `pointer-events` tricks. Worth keeping in mind for interactive rounded elements.
Frequently Asked Questions
What is the CSS border-radius shorthand syntax?
The border-radius shorthand takes up to four values in clockwise order: top-left, top-right, bottom-right, bottom-left. For example, `border-radius: 10px 20px 30px 40px` sets each corner differently. You can also add a forward slash to set separate horizontal and vertical radii — like `border-radius: 10px 20px / 30px 40px` — which creates elliptical corners instead of circular ones. Most developers only use the single-value version, but the full syntax gives you much more control over the shape.
How do I make a perfect circle with CSS border-radius?
Set `border-radius: 50%` on a square element (equal width and height). The 50% value makes each corner's radius half the element's dimension, which creates a perfect circle. If the element isn't square, 50% creates an ellipse instead. For a circle from a rectangular image, you'd need to crop it square first using `width` and `height` with `object-fit: cover`, then apply `border-radius: 50%`.
Should I use pixels or percentages for border-radius?
Use pixels for small, fixed-size elements like buttons, badges, and input fields where you want consistent corner rounding regardless of size. Use percentages for larger, responsive elements like cards, hero sections, and image containers where you want the rounding to scale proportionally with the element. Percentage values are responsive by default — a card with `border-radius: 5%` keeps its proportional roundness at any viewport size, while pixel values don't scale.
Why doesn't border-radius clip images inside a div?
By default, child content can overflow past a parent's rounded corners. You need to add `overflow: hidden` to the parent element. So if you have a card with `border-radius: 12px` and an image inside it, the card also needs `overflow: hidden` for the image to be clipped to the rounded shape. This is probably the most common CSS border-radius question I've seen, and it catches almost everyone the first time.
What is the difference between circular and elliptical border-radius?
Circular border-radius uses one value per corner, creating a quarter-circle curve. Elliptical border-radius uses separate horizontal and vertical values (using the slash syntax), creating a quarter-ellipse curve. For example, `border-radius: 20px` creates uniform circular corners, while `border-radius: 20px / 40px` creates stretched, egg-like corners. Elliptical corners are how designers create those organic, blob-like shapes you see on modern websites.
Does border-radius affect page performance?
For most use cases, no. A few elements with rounded corners won't cause any performance issues. But if you're rendering hundreds of elements — like a large grid or list — and each one has border-radius combined with box-shadow and backdrop-filter, you might see paint performance issues on lower-end devices. The browser has to calculate more complex paint regions for rounded corners. If you notice scroll jank, check your paint times in Chrome DevTools and consider simplifying the effects on repeated elements.
Try ToolsFuel
23+ free online tools for developers, designers, and everyone. No signup required.
Browse All Tools