Border Radius Generator
Generate CSS border-radius shortcuts.
- Reading time:
- 2 min
- Last updated:
- Price:
- Free, no signup
Type or paste text to see the result.
What the Border Radius Generator does
Shape corners visually: drag each corner's radius independently and watch the preview box morph from square to pill to blob. The CSS — border-radius: 12px 24px 12px 24px — writes itself as you drag.
Symmetric, per-corner and elliptical radii are all supported, from subtle rounding to full organic shapes.
Why the Border Radius Generator is useful
The border-radius shorthand takes up to four values (or eight for elliptical corners), and remembering which value controls which corner is genuinely confusing. A visual editor removes the guesswork.
Rounded corners set the whole personality of a design — sharp is formal, rounded is friendly — so it's worth seeing options side by side rather than committing to the first value you try.
Also known as: border radius generator, css border radius, free border radius generator, online border radius generator, border radius generator online free, border radius generator tool, best border radius generator tool.
How to use the Border Radius Generator
- 1
Drag the corner handles
Adjust each corner independently or link them together.
- 2
Preview the shape
See the result on the sample box instantly.
- 3
Copy the CSS
Paste the border-radius rule into your stylesheet.
Key features
- Independent per-corner control
- Linked mode for uniform rounding
- Percentage and pixel values
- Live preview with copy-ready CSS
Benefits
- No more memorizing value order
- Experiment with shapes visually
- Create pills, cards and organic blobs
Real-life use cases
Rounding a card component
A developer settles on 12px corners for all cards after previewing 8, 12 and 16 side by side.
Making a pill button
A designer sets 999px radius for fully rounded button ends.
Building a blob shape
A creative developer uses asymmetric elliptical radii for an organic hero background shape.
Tips for the best results
- Use the same radius scale across your site — 4, 8, 12, 16px — for a coherent feel.
- For perfect pills, use a radius larger than half the element's height; 999px is the convention.
- Percentage values scale with the element, pixels stay fixed — choose based on whether the shape should adapt.
Conclusion
Drag the corners, find the shape, copy the rule.
Frequently asked questions
What's the order of the four values?
- Top-left, top-right, bottom-right, bottom-left — clockwise from the top-left corner.
How do I make a perfect circle?
- Set border-radius to 50% on a square element.
What's the difference between px and %?
- Pixels are fixed; percentages scale with the element's dimensions, which is how elliptical corners are made.
Can I round just one corner?
- Yes — set the other three to 0, or use the individual properties like border-top-left-radius.
Does it work on images?
- Yes, border-radius clips images too, and works in every modern browser.
What are elliptical corners?
- Corners with different horizontal and vertical radii, written as border-radius: 20px / 40px — the generator supports these.
Related tools you may need
- Box Shadow Generator — Generate CSS box-shadow with live preview.
- CSS Gradient Generator — Generate ready-to-copy CSS linear gradients.
- CSS Minifier — Strip whitespace and comments from CSS in one click.
- CSS Beautifier — Reformat compressed CSS with clean two-space indentation.
- Media Query Breakpoint Generator — Generate common CSS breakpoints, or one from a custom width.
- CSS Fluid Clamp Generator — Generate a responsive clamp() value from min/max sizes.
- HTML Minifier — Strip whitespace and comments from HTML.
- HTML Beautifier — Pretty-print minified HTML with 2-space indentation.
- Cron Expression Explainer — Translate a 5-field cron expression into plain English.
Keep exploring
Browse the full tools directory, filter by category, or read guides on the Text Tools Hub blog.