How to use the Border Radius Generator
- Drag the slider to round all four corners — or choose Each corner to set top-left, top-right, bottom-right and bottom-left separately.
- Switch the unit:
pxfor fixed rounding,%to scale with the element (50% on a square makes a circle). - Choose Elliptical or Random blob for organic shapes with 8 values.
- Copy the CSS — it is shortened to the fewest values that give the same shape.
How border-radius values work
| CSS | Corners |
|---|---|
border-radius: 12px | all four |
border-radius: 12px 4px | top-left & bottom-right, top-right & bottom-left |
border-radius: 12px 8px 4px 0 | top-left, top-right, bottom-right, bottom-left (clockwise) |
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% | elliptical: horizontal radii / vertical radii — blob shapes |
Pill buttons: use a large value like 9999px — the browser caps it at half the height, so the ends stay round at any size. Circles: 50% on a square element. Percentages are relative to the box’s width (horizontal radii) and height (vertical radii).
Related: Box Shadow Generator, CSS Gradient Generator, Glassmorphism Generator.
Also searched as: css border radius, rounded corners css, css blob generator, fancy border radius, css rounded corners generator, border radius online.
Tools that pair well with the Border Radius Generator
- CSS Grid Generator — Set the columns, rows and gap, then drag across cells to make areas like header, sidebar and main.
- CSS Filter Generator — Adjust blur, brightness, contrast, saturation, hue, grayscale, sepia, invert and drop shadow on a sample or your own image and copy the filter CSS.
- Cubic Bezier Generator — Shape an easing curve by dragging two handles and race it against standard easings.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Frequently asked questions
How do I make rounded corners in CSS?
Use border-radius, e.g. border-radius: 12px for all corners, or four values for top-left, top-right, bottom-right and bottom-left.
How do I make a pill-shaped button?
Set border-radius to a large value such as 9999px. The browser limits it to half the height, so the ends are always perfectly round.
How do I make a circle?
Give the element equal width and height and border-radius: 50%.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and after it vertical radii, so each corner becomes an ellipse — that is how blob shapes are made.
Can I install Border Radius Generator as a web app and use it offline?
Yes. Border Radius Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.